<!DOCTYPE HTML>
<html lang="en-US-x-hixie" xml:lang="en-US-x-hixie"><head><meta charset="UTF-8">
  <title>HTML 5</title>
  <link href="http://www.whatwg.org/style/specification" rel="stylesheet">
  <link href="http://www.whatwg.org/images/icon" rel="icon">

  <style type="text/css">
   h4 + .element { margin-top: -2.5em; padding-top: 2em; }
   h4 + p + .element { margin-top: -5em; padding-top: 4em; }
   .element { background: #EEFFEE; color: black; margin: 0 0 1em -1em; padding: 0 1em 0.25em 0.75em; border-left: solid #99FF99 0.25em; -padding: 0; /* that last decl is for IE6. Try removing it, it's hilarious! */ }
   .proposal { border: blue solid; padding: 1em; }
   .bad { color: gray; }
   table.matrix, table.matrix td { border: none; text-align: right; }
   table.matrix { margin-left: 2em; }
  </style>
  <link href="http://www.whatwg.org/specs/web-apps/current-work/status.css" rel="stylesheet">
  <script src="status.js"></script>

 <link href="../spectest.css" type="text/css" rel="stylesheet"></head><body onload="initAnnotations()" class="draft"><div class="head">
   <p><a href="http://www.whatwg.org/" class="logo" rel="home"><img src="http://www.whatwg.org/images/logo" alt="WHATWG"></a></p>

   <h1 id="html-5">HTML 5</h1>

   <h2 class="no-num no-toc" id="draft">Draft Recommendation — 19 June
    2008</h2>

   <p class="copyright">© Copyright 2004-2008 Apple Computer, Inc.,
    Mozilla Foundation, and Opera Software ASA.</p>

   <p class="copyright">You are granted a license to use, reproduce and create
    derivative works of this document.</p>
  </div><h4 id="the-canvas"><span class="secno">4.7.11 </span>The <dfn id="canvas"><code>canvas</code></dfn> element</h4>

  <dl class="element">
   <dt>Categories

   </dt><dd><a href="#embedded1">Embedded content</a>.

   </dd><dt>Contexts in which this element may be used:

   </dt><dd>Where <a href="#embedded1">embedded content</a> is expected.

   </dd><dt>Content model:

   </dt><dd><a href="#transparent0">Transparent</a>.

   </dd><dt>Element-specific attributes:

   </dt><dd><code title="attr-canvas-width"><a href="#width0">width</a></code>

   </dd><dd><code title="attr-canvas-height"><a href="#height0">height</a></code>

   </dd><dt>DOM interface:

   </dt><dd>
    <pre class="idl">interface <dfn id="htmlcanvaselement">HTMLCanvasElement</dfn><span class="testrefs kw-none" id="testrefs.canvas.type"> <a href="#testrefs.canvas.type" title="canvas.type">#</a> <a href="type.name.html">type.name</a> <a href="type.exists.html">type.exists</a> <a href="type.delete.html">type.delete</a> <a href="type.prototype.html">type.prototype</a> <a href="type.replace.html">type.replace</a> <a href="type.extend.html">type.extend</a> </span> : <a href="#htmlelement">HTMLElement</a> {
           attribute unsigned long <a href="#width1" title="dom-canvas-width">width</a>;<span class="testrefs kw-none" id="testrefs.size.width"> <a href="#testrefs.size.width" title="size.width">#</a> <a href="size.attributes.html">size.attributes</a> <a href="size.attributes.type.get.html">size.attributes.type.get</a> <a href="size.attributes.type.set.html">size.attributes.type.set</a> </span>
           attribute unsigned long <a href="#height1" title="dom-canvas-height">height</a>;<span class="testrefs kw-none" id="testrefs.size.height"> <a href="#testrefs.size.height" title="size.height">#</a> <a href="size.attributes.html">size.attributes</a> <a href="size.attributes.type.get.html">size.attributes.type.get</a> <a href="size.attributes.type.set.html">size.attributes.type.set</a> </span>

  DOMString <a href="#todataurl" title="dom-canvas-toDataURL">toDataURL</a>();
  DOMString <a href="#todataurl0" title="dom-canvas-toDataURL-type">toDataURL</a>(in DOMString type);

  DOMObject <a href="#getcontext" title="dom-canvas-getContext">getContext</a>(in DOMString contextId);
};</pre>
  </dd></dl>

  <p>The <code><a href="#canvas">canvas</a></code> element represents a
   resolution-dependent bitmap canvas, which can be used for rendering
   graphs, game graphics, or other visual images on the fly.

  </p><p>Authors should not use the <code><a href="#canvas">canvas</a></code>
   element in a document when a more suitable element is available. For
   example, it is inappropriate to use a <code><a href="#canvas">canvas</a></code> element to render a page heading: if the
   desired presentation of the heading is graphically intense, it should be
   marked up using appropriate elements (typically <code><a href="#h1">h1</a></code>) and then styled using CSS and supporting
   technologies such as XBL.

  </p><p>When authors use the <code><a href="#canvas">canvas</a></code> element,
   they should also provide content that, when presented to the user, conveys
   essentially the same function or purpose as the bitmap canvas. This
   content may be placed as content of the <code><a href="#canvas">canvas</a></code> element. The contents of the <code><a href="#canvas">canvas</a></code> element, if any, are the element's <a href="#fallback">fallback content</a><span class="testrefs kw-none" id="testrefs.fallback"> <a href="#testrefs.fallback" title="fallback">#</a> <a href="fallback.basic.html">fallback.basic</a> <a href="fallback.multiple.html">fallback.multiple</a> <a href="fallback.nested.html">fallback.nested</a> </span>.

  </p><p>In interactive visual media, if the <code><a href="#canvas">canvas</a></code> element is <a href="#with-script">with
   script</a>, the <code><a href="#canvas">canvas</a></code> element
   represents an embedded element with a dynamically created image.

  </p><p>In non-interactive, static, visual media, if the <code><a href="#canvas">canvas</a></code> element has been previously painted on
   (e.g. if the page was viewed in an interactive visual medium and is now
   being printed, or if some script that ran during the page layout process
   painted on the element), then the <code><a href="#canvas">canvas</a></code> element represents <a href="#embedded1">embedded content</a> with the current image and size.
   Otherwise, the element represents its <a href="#fallback">fallback
   content</a> instead.

  </p><p>In non-visual media, and in visual media if the <code><a href="#canvas">canvas</a></code> element is <a href="#without">without
   script</a>, the <code><a href="#canvas">canvas</a></code> element
   represents its <a href="#fallback">fallback content</a> instead.

  </p><p>The <code><a href="#canvas">canvas</a></code> element has two attributes
   to control the size of the coordinate space: <dfn id="width0" title="attr-canvas-width"><code>width</code></dfn> and <dfn id="height0" title="attr-canvas-height"><code>height</code></dfn>. These attributes, when
   specified, must have values that are <a href="#valid0" title="valid    non-negative integer">valid non-negative integers</a>. The <a href="#rules">rules for parsing non-negative integers</a> must be used to
   obtain their numeric values<span class="testrefs kw-must" id="testrefs.size.nonnegativeinteger"> <a href="#testrefs.size.nonnegativeinteger" title="size.nonnegativeinteger">#</a> <a href="size.attributes.parse.whitespace.html">size.attributes.parse.whitespace</a> <a href="size.attributes.parse.nonnumber.html">size.attributes.parse.nonnumber</a> <a href="size.attributes.parse.zero.html">size.attributes.parse.zero</a> <a href="size.attributes.parse.negative.html">size.attributes.parse.negative</a> <a href="size.attributes.parse.zerosuffix.html">size.attributes.parse.zerosuffix</a> <a href="size.attributes.parse.floatsuffix.html">size.attributes.parse.floatsuffix</a> <a href="size.attributes.parse.badsuffix.html">size.attributes.parse.badsuffix</a> <a href="size.attributes.parse.percentsuffix.html">size.attributes.parse.percentsuffix</a> <a href="size.attributes.setAttribute.whitespace.html">size.attributes.setAttribute.whitespace</a> <a href="size.attributes.setAttribute.nonnumber.html">size.attributes.setAttribute.nonnumber</a> <a href="size.attributes.setAttribute.zero.html">size.attributes.setAttribute.zero</a> <a href="size.attributes.setAttribute.negative.html">size.attributes.setAttribute.negative</a> <a href="size.attributes.setAttribute.zerosuffix.html">size.attributes.setAttribute.zerosuffix</a> <a href="size.attributes.setAttribute.floatsuffix.html">size.attributes.setAttribute.floatsuffix</a> <a href="size.attributes.setAttribute.badsuffix.html">size.attributes.setAttribute.badsuffix</a> <a href="size.attributes.setAttribute.percentsuffix.html">size.attributes.setAttribute.percentsuffix</a> </span>. If an attribute is missing<span class="testrefs kw-must" id="testrefs.size.missing"> <a href="#testrefs.size.missing" title="size.missing">#</a> <a href="size.attributes.default.html">size.attributes.default</a> <a href="size.attributes.removed.html">size.attributes.removed</a> </span>, or if parsing its
   value returns an error<span class="testrefs kw-must" id="testrefs.size.error"> <a href="#testrefs.size.error" title="size.error">#</a> <a href="size.attributes.parse.nonnumber.html">size.attributes.parse.nonnumber</a> <a href="size.attributes.parse.negative.html">size.attributes.parse.negative</a> <a href="size.attributes.setAttribute.nonnumber.html">size.attributes.setAttribute.nonnumber</a> <a href="size.attributes.setAttribute.negative.html">size.attributes.setAttribute.negative</a> </span>, then the default value must be used instead. The
   <code title="attr-canvas-width"><a href="#width0">width</a></code> attribute
   defaults to 300, and the <code title="attr-canvas-height"><a href="#height0">height</a></code> attribute defaults to 150<span class="testrefs kw-none" id="testrefs.size.default"> <a href="#testrefs.size.default" title="size.default">#</a> <a href="size.attributes.default.html">size.attributes.default</a> </span>.

  </p><p>The intrinsic dimensions of the <code><a href="#canvas">canvas</a></code> element equal the size of the coordinate
   space, with the numbers interpreted in CSS pixels. However, the element
   can be sized arbitrarily by a style sheet. During rendering, the image is
   scaled to fit this layout size<span class="testrefs kw-none" id="testrefs.size.css"> <a href="#testrefs.size.css" title="size.css">#</a> <a href="size.attributes.style.html">size.attributes.style</a> </span>.

  </p><p>The size of the coordinate space does not necessarily represent the size
   of the actual bitmap that the user agent will use internally or during
   rendering. On high-definition displays, for instance, the user agent may
   internally use a bitmap with two device pixels per unit in the coordinate
   space, so that the rendering remains at high quality throughout.

  </p><p>Whenever the <code title="attr-canvas-width"><a href="#width0">width</a></code> and <code title="attr-canvas-height"><a href="#height0">height</a></code> attributes are set (whether to a new
   value or to the previous value), the bitmap and any associated contexts
   must be cleared back to their initial state and reinitialized with the
   newly specified coordinate space dimensions<span class="testrefs kw-must" id="testrefs.initial.reset"> <a href="#testrefs.initial.reset" title="initial.reset">#</a> <a href="initial.reset.different.html">initial.reset.different</a> <a href="initial.reset.same.html">initial.reset.same</a> <a href="initial.reset.path.html">initial.reset.path</a> <a href="initial.reset.clip.html">initial.reset.clip</a> <a href="initial.reset.transform.html">initial.reset.transform</a> <a href="security.reset.html">security.reset</a> <a href="initial.reset.2dstate.html">initial.reset.2dstate</a> </span>.

  </p><p>The <dfn id="width1" title="dom-canvas-width"><code>width</code></dfn> and
   <dfn id="height1" title="dom-canvas-height"><code>height</code></dfn> DOM
   attributes must <a href="#reflect">reflect</a> the content attributes of
   the same name<span class="testrefs kw-must" id="testrefs.size.reflect"> <a href="#testrefs.size.reflect" title="size.reflect">#</a> <a href="size.attributes.reflect.1.html">size.attributes.reflect.1</a> <a href="size.attributes.reflect.2.html">size.attributes.reflect.2</a> </span>.

  </p><div class="example">
   <p>Only one square appears to be drawn in the following example:</p>

   <pre>  // canvas is a reference to a &lt;canvas&gt; element
  var context = canvas.getContext('2d');
  context.fillRect(0,0,50,50);
  canvas.setAttribute('width', '300'); // clears the canvas
  context.fillRect(0,100,50,50);
  canvas.width = canvas.width; // clears the canvas
  context.fillRect(100,0,50,50); // only this square remains</pre>
  </div>

  <p>When the canvas is initialized it must be set to fully transparent
   black<span class="testrefs kw-must" id="testrefs.initial.colour"> <a href="#testrefs.initial.colour" title="initial.colour">#</a> <a href="initial.colour.html">initial.colour</a> </span>.

  </p><p>To draw on the canvas, authors must first obtain a reference to a <dfn id="context0">context</dfn> using the <dfn id="getcontext" title="dom-canvas-getContext"><code>getContext(<var title="">contextId</var>)</code></dfn> method of the <code><a href="#canvas">canvas</a></code> element.

  </p><p>This specification only defines one context, with the name &quot;<code title="canvas-context-2d"><a href="#d">2d</a></code>&quot;. If <code title="dom-canvas-getContext"><a href="#getcontext">getContext()</a></code>
   is called with that exact string for its <var title="">contextId</var>
   argument, then the UA must return a reference to an object implementing
   <code><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code><span class="testrefs kw-must" id="testrefs.context.2d"> <a href="#testrefs.context.2d" title="context.2d">#</a> <a href="2d.getcontext.exists.html">2d.getcontext.exists</a> </span>.
   Other specifications may define their own contexts, which would return
   different objects.

  </p><p>Vendors may also define experimental contexts using the syntax
   <code><var title="">vendorname</var>-<var title="">context</var></code>,
   for example, <code>moz-3d</code>.

  </p><p>When the UA is passed an empty string<span class="testrefs kw-must" id="testrefs.context.empty"> <a href="#testrefs.context.empty" title="context.empty">#</a> <a href="context.emptystring.html">context.emptystring</a> </span> or a string specifying a context
   that it does not support<span class="testrefs kw-must" id="testrefs.context.unrecognised"> <a href="#testrefs.context.unrecognised" title="context.unrecognised">#</a> <a href="context.unrecognised.badname.html">context.unrecognised.badname</a> <a href="context.unrecognised.badsuffix.html">context.unrecognised.badsuffix</a> <a href="context.unrecognised.nullsuffix.html">context.unrecognised.nullsuffix</a> <a href="context.unrecognised.unicode.html">context.unrecognised.unicode</a> </span>, then it must return null. String comparisons
   must be literal and case-sensitive<span class="testrefs kw-must" id="testrefs.context.casesensitive"> <a href="#testrefs.context.casesensitive" title="context.casesensitive">#</a> <a href="context.casesensitive.html">context.casesensitive</a> </span>.

  </p><p>Arguments other than the <var title="">contextId</var> must be ignored,
   and must not cause the user agent to raise an exception (as would normally
   occur if a method was called with the wrong number of arguments)<span class="testrefs kw-must" id="testrefs.context.extraarguments"> <a href="#testrefs.context.extraarguments" title="context.extraarguments">#</a> <a href="context.arguments.extra.html">context.arguments.extra</a> </span>.

  </p><p class="note">A future version of this specification will probably define a
   <code>3d</code> context (probably based on the OpenGL ES API).</p>
  <!-- XXXURL data: URIs? -->

  <p>The <dfn id="todataurl" title="dom-canvas-toDataURL"><code>toDataURL()</code></dfn> method must,
   when called with no arguments, return a <code title="">data:</code> URI
   containing a representation of the image as a PNG file<span class="testrefs kw-must" id="testrefs.toDataURL.noarguments"> <a href="#testrefs.toDataURL.noarguments" title="toDataURL.noarguments">#</a> <a href="toDataURL.default.html">toDataURL.default</a> <a href="toDataURL.nocontext.html">toDataURL.nocontext</a> <a href="toDataURL.primarycolours.html">toDataURL.primarycolours</a> <a href="toDataURL.complexcolours.html">toDataURL.complexcolours</a> </span>. <a href="#refsPNG">[PNG]</a>.</p>
  <!-- XXXURL data: URIs? -->

  <p>If the canvas has no pixels (i.e. either its horizontal dimension or its
   vertical dimension is zero) then the method must return the string &quot;<code title="">data:,</code>&quot;<span class="testrefs kw-must" id="testrefs.toDataURL.zerosize"> <a href="#testrefs.toDataURL.zerosize" title="toDataURL.zerosize">#</a> <a href="toDataURL.zerosize.html">toDataURL.zerosize</a> </span>. (This is the shortest <code title="">data:</code>
   URI; it represents the empty string in a <code title="">text/plain</code>
   resource.)</p>
  <!-- XXXURL data: URIs? -->

  <p>The <dfn id="todataurl0" title="dom-canvas-toDataURL-type"><code>toDataURL(<var title="">type</var>)</code></dfn> method (when called with one <em>or
   more</em> arguments) must return a <code title="">data:</code> URI
   containing a representation of the image in the format given by <var title="">type</var>. The possible values are MIME types with no
   parameters, for example <code>image/png</code>, <code>image/jpeg</code>,
   or even maybe <code>image/svg+xml</code> if the implementation actually
   keeps enough information to reliably render an SVG image from the canvas.

  </p><p>Only support for <code>image/png</code> is required<span class="testrefs kw-required" id="testrefs.toDataURL.png"> <a href="#testrefs.toDataURL.png" title="toDataURL.png">#</a> <a href="toDataURL.png.html">toDataURL.png</a> </span>. User agents may
   support other types. If the user agent does not support the requested
   type, it must return the image using the PNG format<span class="testrefs kw-must" id="testrefs.toDataURL.unrecognised"> <a href="#testrefs.toDataURL.unrecognised" title="toDataURL.unrecognised">#</a> <a href="toDataURL.unrecognised.html">toDataURL.unrecognised</a> </span>.</p>
  <!-- XXXURL data: URIs? -->

  <p>User agents must convert the provided type to lower case before
   establishing if they support that type and before creating the <code title="">data:</code> URI<span class="testrefs kw-must" id="testrefs.toDataURL.lowercase"> <a href="#testrefs.toDataURL.lowercase" title="toDataURL.lowercase">#</a> <a href="toDataURL.lowercase.html">toDataURL.lowercase</a> </span>.</p>
  <!-- XXX define "convert to lower
  case" -->

  <p class="note">When trying to use types other than <code>image/png</code>,
   authors can check if the image was really returned in the requested format
   by checking to see if the returned string starts with one the exact
   strings &quot;<code title="">data:image/png,</code>&quot; or &quot;<code title="">data:image/png;</code>&quot;. If it does, the image is PNG, and thus
   the requested type was not supported. (The one exception to this is if the
   canvas has either no height or no width, in which case the result might
   simply be &quot;<code title="">data:,</code>&quot;.)

  </p><p>If the method is invoked with the first argument giving a type
   corresponding to one of the types given in the first column of the
   following table, and the user agent supports that type, then the
   subsequent arguments, if any, must be treated as described in the second
   cell of that row.

  </p><table>
   <thead>
    <tr>
     <th> Type

     </th><th> Other arguments

   </th></tr></thead><tbody>
    <tr>
     <td> image/jpeg

     </td><td> The second argument, if it is a number between 0.0 and 1.0, must be
      treated as the desired quality level.
  </td></tr></tbody></table>

  <p>Other arguments must be ignored and must not cause the user agent to
   raise an exception (as would normally occur if a method was called with
   the wrong number of arguments)<span class="testrefs kw-must" id="testrefs.toDataURL.arguments"> <a href="#testrefs.toDataURL.arguments" title="toDataURL.arguments">#</a> <a href="toDataURL.arguments.1.html">toDataURL.arguments.1</a> <a href="toDataURL.arguments.2.html">toDataURL.arguments.2</a> <a href="toDataURL.arguments.3.html">toDataURL.arguments.3</a> </span>. A future version of this specification
   will probably allow extra parameters to be passed to <code title="dom-canvas-toDataURL"><a href="#todataurl">toDataURL()</a></code> to
   allow authors to more carefully control compression settings, image
   metadata, etc.

  </p><h5 id="the-2d"><span class="secno">4.7.11.1. </span>The 2D context</h5>

  <p>When the <code title="dom-canvas-getContext"><a href="#getcontext">getContext()</a></code> method of a <code><a href="#canvas">canvas</a></code> element is invoked with <dfn id="d" title="canvas-context-2d"><code>2d</code></dfn> as the argument, a <code><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code>
   object is returned.

  </p><p>There is only one <code><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code>
   object per canvas, so calling the <code title="dom-canvas-getContext"><a href="#getcontext">getContext()</a></code> method with the <code title="canvas-context-2d"><a href="#d">2d</a></code> argument a second time
   must return the same object<span class="testrefs kw-must" id="testrefs.context.2d.unique"> <a href="#testrefs.context.2d.unique" title="context.2d.unique">#</a> <a href="2d.getcontext.unique.html">2d.getcontext.unique</a> <a href="2d.getcontext.shared.html">2d.getcontext.shared</a> </span>.

  </p><p>The 2D context represents a flat Cartesian surface whose origin (0,0) is
   at the top left corner, with the coordinate space having <var title="">x</var> values increasing when going right, and <var title="">y</var> values increasing when going down<span class="testrefs kw-none" id="testrefs.2d.coordinatespace"> <a href="#testrefs.2d.coordinatespace" title="2d.coordinatespace">#</a> <a href="2d.coordinatespace.html">2d.coordinatespace</a> </span>.

  </p><pre class="idl">interface <dfn id="canvasrenderingcontext2d">CanvasRenderingContext2D</dfn><span class="testrefs kw-none" id="testrefs.context.2d.type"> <a href="#testrefs.context.2d.type" title="context.2d.type">#</a> <a href="2d.type.exists.html">2d.type.exists</a> <a href="2d.type.delete.html">2d.type.delete</a> <a href="2d.type.prototype.html">2d.type.prototype</a> <a href="2d.type.replace.html">2d.type.replace</a> <a href="2d.type.extend.html">2d.type.extend</a> </span> {

  // back-reference to the canvas
  readonly<span class="testrefs kw-none" id="testrefs.2d.canvas.attribute"> <a href="#testrefs.2d.canvas.attribute" title="2d.canvas.attribute">#</a> <a href="2d.canvas.readonly.html">2d.canvas.readonly</a> </span> attribute <a href="#htmlcanvaselement">HTMLCanvasElement</a> <a href="#canvas0" title="dom-context-2d-canvas">canvas</a>;

  // state
  void <a href="#save" title="dom-context-2d-save">save</a>(); // push state on state stack
  void <a href="#restore" title="dom-context-2d-restore">restore</a>(); // pop state stack and restore state

  // transformations (default transform is the identity matrix)
  void <a href="#scale" title="dom-context-2d-scale">scale</a>(in float x, in float y);
  void <a href="#rotate" title="dom-context-2d-rotate">rotate</a>(in float angle);
  void <a href="#translate" title="dom-context-2d-translate">translate</a>(in float x, in float y);
  void <a href="#transform" title="dom-context-2d-transform">transform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
  void <a href="#settransform" title="dom-context-2d-setTransform">setTransform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
<!--
  // XXXv4 we've also received requests for:
  void skew(...);
  void reflect(...); // or mirror(...)
-->
  // compositing
           attribute float <a href="#globalalpha" title="dom-context-2d-globalAlpha">globalAlpha</a>; // (default 1.0)
           attribute DOMString <a href="#globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</a>; // (default source-over)

  // colors and styles
           attribute DOMObject <a href="#strokestyle" title="dom-context-2d-strokeStyle">strokeStyle</a>; // (default black)
           attribute DOMObject <a href="#fillstyle" title="dom-context-2d-fillStyle">fillStyle</a>; // (default black)
  <a href="#canvasgradient">CanvasGradient</a> <a href="#createlineargradient" title="dom-context-2d-createLinearGradient">createLinearGradient</a>(in float x0, in float y0, in float x1, in float y1);
  <a href="#canvasgradient">CanvasGradient</a> <a href="#createradialgradient" title="dom-context-2d-createRadialGradient">createRadialGradient</a>(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
  <a href="#canvaspattern0">CanvasPattern</a> <a href="#createpattern" title="dom-context-2d-createPattern">createPattern</a>(in <a href="#htmlimageelement">HTMLImageElement</a> image, in DOMString repetition);
  <a href="#canvaspattern0">CanvasPattern</a> <a href="#createpattern" title="dom-context-2d-createPattern">createPattern</a>(in <a href="#htmlcanvaselement">HTMLCanvasElement</a> image, in DOMString repetition);

  // line caps/joins
           attribute float <a href="#linewidth" title="dom-context-2d-lineWidth">lineWidth</a>; // (default 1)
           attribute DOMString <a href="#linecap" title="dom-context-2d-lineCap">lineCap</a>; // &quot;butt&quot;, &quot;round&quot;, &quot;square&quot; (default &quot;butt&quot;)
           attribute DOMString <a href="#linejoin" title="dom-context-2d-lineJoin">lineJoin</a>; // &quot;round&quot;, &quot;bevel&quot;, &quot;miter&quot; (default &quot;miter&quot;)
           attribute float <a href="#miterlimit" title="dom-context-2d-miterLimit">miterLimit</a>; // (default 10)

  // shadows
           attribute float <a href="#shadowoffsetx" title="dom-context-2d-shadowOffsetX">shadowOffsetX</a>; // (default 0)
           attribute float <a href="#shadowoffsety" title="dom-context-2d-shadowOffsetY">shadowOffsetY</a>; // (default 0)
           attribute float <a href="#shadowblur" title="dom-context-2d-shadowBlur">shadowBlur</a>; // (default 0)
           attribute DOMString <a href="#shadowcolor" title="dom-context-2d-shadowColor">shadowColor</a>; // (default transparent black)

  // rects
  void <a href="#clearrect" title="dom-context-2d-clearRect">clearRect</a>(in float x, in float y, in float w, in float h);
  void <a href="#fillrect" title="dom-context-2d-fillRect">fillRect</a>(in float x, in float y, in float w, in float h);
  void <a href="#strokerect" title="dom-context-2d-strokeRect">strokeRect</a>(in float x, in float y, in float w, in float h);

  // path API
  void <a href="#beginpath" title="dom-context-2d-beginPath">beginPath</a>();
  void <a href="#closepath" title="dom-context-2d-closePath">closePath</a>();
  void <a href="#moveto" title="dom-context-2d-moveTo">moveTo</a>(in float x, in float y);
  void <a href="#lineto" title="dom-context-2d-lineTo">lineTo</a>(in float x, in float y);
  void <a href="#quadraticcurveto" title="dom-context-2d-quadraticCurveTo">quadraticCurveTo</a>(in float cpx, in float cpy, in float x, in float y);
  void <a href="#beziercurveto" title="dom-context-2d-bezierCurveTo">bezierCurveTo</a>(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
  void <a href="#arcto" title="dom-context-2d-arcTo">arcTo</a>(in float x1, in float y1, in float x2, in float y2, in float radius);
  void <a href="#rectx" title="dom-context-2d-rect">rect</a>(in float x, in float y, in float w, in float h);
  void <a href="#arcx-" title="dom-context-2d-arc">arc</a>(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
  void <a href="#fill" title="dom-context-2d-fill">fill</a>();
  void <a href="#stroke" title="dom-context-2d-stroke">stroke</a>();
  void <a href="#clip" title="dom-context-2d-clip">clip</a>();
  boolean <a href="#ispointinpath" title="dom-context-2d-isPointInPath">isPointInPath</a>(in float x, in float y);

  // text
           attribute DOMString <a href="#font" title="dom-context-2d-font">font</a>; // (default 10px sans-serif)
           attribute DOMString <a href="#textalign" title="dom-context-2d-textAlign">textAlign</a>; // &quot;start&quot;, &quot;end&quot;, &quot;left&quot;, &quot;right&quot;, &quot;center&quot; (default: &quot;start&quot;)
           attribute DOMString <a href="#textbaseline" title="dom-context-2d-textBaseline">textBaseline</a>; // &quot;top&quot;, &quot;hanging&quot;, &quot;middle&quot;, &quot;alphabetic&quot;, &quot;ideographic&quot;, &quot;bottom&quot; (default: &quot;alphabetic&quot;)
  void <a href="#filltext" title="dom-context-2d-fillText">fillText</a>(in DOMString text, in float x, in float y);
  void <a href="#filltext" title="dom-context-2d-fillText">fillText</a>(in DOMString text, in float x, in float y, in float maxWidth);
  void <a href="#stroketext" title="dom-context-2d-strokeText">strokeText</a>(in DOMString text, in float x, in float y);
  void <a href="#stroketext" title="dom-context-2d-strokeText">strokeText</a>(in DOMString text, in float x, in float y, in float maxWidth);<!-- XXXDVT
  void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in float x, in float y);
  void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in float x, in float y, in float maxHeight);
  void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y);
  void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y, in float maxHeight); -->
  <a href="#textmetrics">TextMetrics</a> <a href="#measuretext" title="dom-context-2d-measureText">measureText</a>(in DOMString text);

  // drawing images
  void <a href="#drawimage" title="dom-context-2d-drawImage">drawImage</a>(in <a href="#htmlimageelement">HTMLImageElement</a> image, in float dx, in float dy);
  void <a href="#drawimage" title="dom-context-2d-drawImage">drawImage</a>(in <a href="#htmlimageelement">HTMLImageElement</a> image, in float dx, in float dy, in float dw, in float dh);
  void <a href="#drawimage" title="dom-context-2d-drawImage">drawImage</a>(in <a href="#htmlimageelement">HTMLImageElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
  void <a href="#drawimage" title="dom-context-2d-drawImage">drawImage</a>(in <a href="#htmlcanvaselement">HTMLCanvasElement</a> image, in float dx, in float dy);
  void <a href="#drawimage" title="dom-context-2d-drawImage">drawImage</a>(in <a href="#htmlcanvaselement">HTMLCanvasElement</a> image, in float dx, in float dy, in float dw, in float dh);
  void <a href="#drawimage" title="dom-context-2d-drawImage">drawImage</a>(in <a href="#htmlcanvaselement">HTMLCanvasElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

  // pixel manipulation
  <a href="#imagedata">ImageData</a> <a href="#createimagedata" title="dom-context-2d-createImageData">createImageData</a>(in float sw, in float sh);
  <a href="#imagedata">ImageData</a> <a href="#getimagedata" title="dom-context-2d-getImageData">getImageData</a>(in float sx, in float sy, in float sw, in float sh);
  void <a href="#putimagedata" title="dom-context-2d-putImageData">putImageData</a>(in <a href="#imagedata">ImageData</a> imagedata, in float dx, in float dy);
  void <a href="#putimagedata0" title="dom-context-2d-putImageData-dirty">putImageData</a>(in <a href="#imagedata">ImageData</a> imagedata, in float dx, in float dy, in float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);
};

interface <dfn id="canvasgradient">CanvasGradient</dfn> {
  // opaque object
  void <a href="#addcolorstop" title="dom-canvasgradient-addColorStop">addColorStop</a>(in float offset, in DOMString color);
};

interface <dfn id="canvaspattern">CanvasPattern</dfn> {
  // opaque object
};

interface <dfn id="textmetrics">TextMetrics</dfn> {
  readonly attribute float <a href="#width2" title="dom-textmetrics-width">width</a>;
};

interface <dfn id="imagedata">ImageData</dfn><span class="testrefs kw-none" id="testrefs.2d.imageData.type"> <a href="#testrefs.2d.imageData.type" title="2d.imageData.type">#</a> <a href="2d.imageData.object.properties.html">2d.imageData.object.properties</a> <a href="2d.imageData.object.readonly.html">2d.imageData.object.readonly</a> <a href="2d.imageData.object.ctor.html">2d.imageData.object.ctor</a> </span> {
  readonly attribute long int <a href="#width3" title="dom-imagedata-width">width</a>;
  readonly attribute long int <a href="#height2" title="dom-imagedata-height">height</a>;
  readonly attribute <a href="#canvaspixelarray">CanvasPixelArray</a> <a href="#data1" title="dom-imagedata-data">data</a>;
};

interface <dfn id="canvaspixelarray">CanvasPixelArray</dfn> {
  readonly attribute unsigned long <a href="#length5" title="dom-canvaspixelarray-length">length</a>;
  [IndexGetter] <span>float</span> <span title="dom-XXX5">XXX5</span>(in unsigned long index); <!-- XXX DOMB -->
  [IndexSetter] void <span title="dom-XXX6">XXX6</span>(in unsigned long index, in float value); <!-- XXX DOMB -->
};</pre>

  <p>The <dfn id="canvas0" title="dom-context-2d-canvas"><code>canvas</code></dfn> attribute must
   return the <code><a href="#canvas">canvas</a></code> element that the
   context paints on<span class="testrefs kw-must" id="testrefs.2d.canvas"> <a href="#testrefs.2d.canvas" title="2d.canvas">#</a> <a href="2d.canvas.reference.html">2d.canvas.reference</a> </span>.

  </p><p>Unless otherwise stated, for the 2D context interface, any method call
   with a numeric argument whose value is infinite or a NaN value must be
   ignored<span class="testrefs kw-must" id="testrefs.2d.nonfinite"> <a href="#testrefs.2d.nonfinite" title="2d.nonfinite">#</a> <a href="2d.transformation.scale.nonfinite.html">2d.transformation.scale.nonfinite</a> <a href="2d.transformation.rotate.nonfinite.html">2d.transformation.rotate.nonfinite</a> <a href="2d.transformation.translate.nonfinite.html">2d.transformation.translate.nonfinite</a> <a href="2d.transformation.transform.nonfinite.html">2d.transformation.transform.nonfinite</a> <a href="2d.transformation.setTransform.nonfinite.html">2d.transformation.setTransform.nonfinite</a> <a href="2d.clearRect.nonfinite.html">2d.clearRect.nonfinite</a> <a href="2d.fillRect.nonfinite.html">2d.fillRect.nonfinite</a> <a href="2d.strokeRect.nonfinite.html">2d.strokeRect.nonfinite</a> <a href="2d.path.moveTo.nonfinite.html">2d.path.moveTo.nonfinite</a> <a href="2d.path.lineTo.nonfinite.html">2d.path.lineTo.nonfinite</a> <a href="2d.path.quadraticCurveTo.nonfinite.html">2d.path.quadraticCurveTo.nonfinite</a> <a href="2d.path.bezierCurveTo.nonfinite.html">2d.path.bezierCurveTo.nonfinite</a> <a href="2d.path.arcTo.nonfinite.html">2d.path.arcTo.nonfinite</a> <a href="2d.path.arc.nonfinite.html">2d.path.arc.nonfinite</a> <a href="2d.path.rect.nonfinite.html">2d.path.rect.nonfinite</a> <a href="2d.drawImage.nonfinite.html">2d.drawImage.nonfinite</a> </span>.</p>
  <!--
   Philip Taylor wrote:
   > My experience with some 3d canvas code is that infinities come up in
   > naturally harmless places, e.g. having a function that scales by x then
   > translates by 1/x and wanting it to work when x=0 (which ought to draw
   > nothing, since anything it draws is zero pixels wide), and it's a bit
   > annoying to track down and fix those issues, so I'd probably like it if
   > they were harmless in canvas methods. Opera appears to silently not draw
   > anything if the transformation matrix is not finite, but Firefox throws
   > exceptions when passing in non-finite arguments.
  -->

  <p>Whenever the CSS value <code title="">currentColor</code> is used as a
   color in this API, the &quot;computed value of the 'color' property&quot; for the
   purposes of determining the computed value of the <code title="">currentColor</code> keyword is the computed value of the 'color'
   property on the element in question at the time that the color is
   specified<span class="testrefs kw-none" id="testrefs.2d.currentColor.onset"> <a href="#testrefs.2d.currentColor.onset" title="2d.currentColor.onset">#</a> <a href="2d.fillStyle.parse.current.basic.html">2d.fillStyle.parse.current.basic</a> <a href="2d.fillStyle.parse.current.changed.html">2d.fillStyle.parse.current.changed</a> </span> (e.g. when the appropriate attribute is set, or when the method
   is called; not when the color is rendered or otherwise used). If the
   computed value of the 'color' property is undefined for a particular case
   (e.g. because the element is not in a document), then the &quot;computed value
   of the 'color' property&quot; for the purposes of determining the computed
   value of the <code title="">currentColor</code> keyword is fully opaque
   black<span class="testrefs kw-none" id="testrefs.2d.currentColor.outofdoc"> <a href="#testrefs.2d.currentColor.outofdoc" title="2d.currentColor.outofdoc">#</a> <a href="2d.fillStyle.parse.current.removed.html">2d.fillStyle.parse.current.removed</a> </span>. <a href="#refsCSS3COLOR">[CSS3COLOR]</a>

  </p><h6 id="the-canvas0"><span class="secno">4.7.11.1.1. </span>The canvas state</h6>

  <p>Each context maintains a stack of drawing states. <dfn id="drawing0" title="drawing state">Drawing states</dfn> consist of:

  </p><ul class="brief">
   <li>The current <a href="#transformations0" title="dom-context-2d-transformation">transformation matrix</a><span class="testrefs kw-none" id="testrefs.2d.state.transformation"> <a href="#testrefs.2d.state.transformation" title="2d.state.transformation">#</a> <a href="2d.state.saverestore.transformation.html">2d.state.saverestore.transformation</a> </span>.

   </li><li>The current <a href="#clipping">clipping region</a><span class="testrefs kw-none" id="testrefs.2d.state.clip"> <a href="#testrefs.2d.state.clip" title="2d.state.clip">#</a> <a href="2d.state.saverestore.clip.html">2d.state.saverestore.clip</a> </span>.

   </li><li>The current values of the following attributes: <code title="dom-context-2d-strokeStyle"><a href="#strokestyle">strokeStyle</a></code><span class="testrefs kw-none" id="testrefs.2d.state.strokeStyle"> <a href="#testrefs.2d.state.strokeStyle" title="2d.state.strokeStyle">#</a> <a href="2d.state.saverestore.strokeStyle.html">2d.state.saverestore.strokeStyle</a> </span>, <code title="dom-context-2d-fillStyle"><a href="#fillstyle">fillStyle</a></code><span class="testrefs kw-none" id="testrefs.2d.state.fillStyle"> <a href="#testrefs.2d.state.fillStyle" title="2d.state.fillStyle">#</a> <a href="2d.state.saverestore.fillStyle.html">2d.state.saverestore.fillStyle</a> </span>,
    <code title="dom-context-2d-globalAlpha"><a href="#globalalpha">globalAlpha</a></code><span class="testrefs kw-none" id="testrefs.2d.state.globalAlpha"> <a href="#testrefs.2d.state.globalAlpha" title="2d.state.globalAlpha">#</a> <a href="2d.state.saverestore.globalAlpha.html">2d.state.saverestore.globalAlpha</a> </span>, <code title="dom-context-2d-lineWidth"><a href="#linewidth">lineWidth</a></code><span class="testrefs kw-none" id="testrefs.2d.state.lineWidth"> <a href="#testrefs.2d.state.lineWidth" title="2d.state.lineWidth">#</a> <a href="2d.state.saverestore.lineWidth.html">2d.state.saverestore.lineWidth</a> </span>,
    <code title="dom-context-2d-lineCap"><a href="#linecap">lineCap</a></code><span class="testrefs kw-none" id="testrefs.2d.state.lineCap"> <a href="#testrefs.2d.state.lineCap" title="2d.state.lineCap">#</a> <a href="2d.state.saverestore.lineCap.html">2d.state.saverestore.lineCap</a> </span>,
    <code title="dom-context-2d-lineJoin"><a href="#linejoin">lineJoin</a></code><span class="testrefs kw-none" id="testrefs.2d.state.lineJoin"> <a href="#testrefs.2d.state.lineJoin" title="2d.state.lineJoin">#</a> <a href="2d.state.saverestore.lineJoin.html">2d.state.saverestore.lineJoin</a> </span>, <code title="dom-context-2d-miterLimit"><a href="#miterlimit">miterLimit</a></code><span class="testrefs kw-none" id="testrefs.2d.state.miterLimit"> <a href="#testrefs.2d.state.miterLimit" title="2d.state.miterLimit">#</a> <a href="2d.state.saverestore.miterLimit.html">2d.state.saverestore.miterLimit</a> </span>, <code title="dom-context-2d-shadowOffsetX"><a href="#shadowoffsetx">shadowOffsetX</a></code><span class="testrefs kw-none" id="testrefs.2d.state.shadowOffsetX"> <a href="#testrefs.2d.state.shadowOffsetX" title="2d.state.shadowOffsetX">#</a> <a href="2d.state.saverestore.shadowOffsetX.html">2d.state.saverestore.shadowOffsetX</a> </span>, <code title="dom-context-2d-shadowOffsetY"><a href="#shadowoffsety">shadowOffsetY</a></code><span class="testrefs kw-none" id="testrefs.2d.state.shadowOffsetY"> <a href="#testrefs.2d.state.shadowOffsetY" title="2d.state.shadowOffsetY">#</a> <a href="2d.state.saverestore.shadowOffsetY.html">2d.state.saverestore.shadowOffsetY</a> </span>, <code title="dom-context-2d-shadowBlur"><a href="#shadowblur">shadowBlur</a></code><span class="testrefs kw-none" id="testrefs.2d.state.shadowBlur"> <a href="#testrefs.2d.state.shadowBlur" title="2d.state.shadowBlur">#</a> <a href="2d.state.saverestore.shadowBlur.html">2d.state.saverestore.shadowBlur</a> </span>, <code title="dom-context-2d-shadowColor"><a href="#shadowcolor">shadowColor</a></code><span class="testrefs kw-none" id="testrefs.2d.state.shadowColor"> <a href="#testrefs.2d.state.shadowColor" title="2d.state.shadowColor">#</a> <a href="2d.state.saverestore.shadowColor.html">2d.state.saverestore.shadowColor</a> </span>, <code title="dom-context-2d-globalCompositeOperation"><a href="#globalcompositeoperation">globalCompositeOperation</a></code><span class="testrefs kw-none" id="testrefs.2d.state.globalCompositeOperation"> <a href="#testrefs.2d.state.globalCompositeOperation" title="2d.state.globalCompositeOperation">#</a> <a href="2d.state.saverestore.globalCompositeOperation.html">2d.state.saverestore.globalCompositeOperation</a> </span>,
    <code title="dom-context-2d-font"><a href="#font">font</a></code>, <code title="dom-context-2d-textAlign"><a href="#textalign">textAlign</a></code>,
    <code title="dom-context-2d-textBaseline"><a href="#textbaseline">textBaseline</a></code>.
  </li></ul>

  <p class="note">The current path<span class="testrefs kw-none" id="testrefs.2d.state.path"> <a href="#testrefs.2d.state.path" title="2d.state.path">#</a> <a href="2d.state.saverestore.path.html">2d.state.saverestore.path</a> </span> and the current bitmap<span class="testrefs kw-none" id="testrefs.2d.state.bitmap"> <a href="#testrefs.2d.state.bitmap" title="2d.state.bitmap">#</a> <a href="2d.state.saverestore.bitmap.html">2d.state.saverestore.bitmap</a> </span> are not part of the
   drawing state. The current path is persistent, and can only be reset using
   the <code title="dom-context-2d-beginPath"><a href="#beginpath">beginPath()</a></code> method. The current bitmap is
   <span title="concept-canvas-image">a property of the
   canvas</span><!-- XXX xref -->, not the context.

  </p><p>The <dfn id="save" title="dom-context-2d-save"><code>save()</code></dfn>
   method must push a copy of the current drawing state onto the drawing
   state stack<span class="testrefs kw-must" id="testrefs.2d.state.save"> <a href="#testrefs.2d.state.save" title="2d.state.save">#</a> <a href="2d.state.saverestore.stack.html">2d.state.saverestore.stack</a> <a href="2d.state.saverestore.stackdepth.html">2d.state.saverestore.stackdepth</a> </span>.

  </p><p>The <dfn id="restore" title="dom-context-2d-restore"><code>restore()</code></dfn> method must pop
   the top entry in the drawing state stack, and reset the drawing state it
   describes<span class="testrefs kw-must" id="testrefs.2d.state.restore"> <a href="#testrefs.2d.state.restore" title="2d.state.restore">#</a> <a href="2d.state.saverestore.stack.html">2d.state.saverestore.stack</a> <a href="2d.state.saverestore.stackdepth.html">2d.state.saverestore.stackdepth</a> </span>. If there is no saved state, the method must do nothing<span class="testrefs kw-must" id="testrefs.2d.state.restore.underflow"> <a href="#testrefs.2d.state.restore.underflow" title="2d.state.restore.underflow">#</a> <a href="2d.state.saverestore.underflow.html">2d.state.saverestore.underflow</a> </span>.</p>
  <!-- XXXv4
idea from Mihai:
> 5. Drawing states should be saveable with IDs, and for easier restoring.
>
> save(id)
> restore(id)
>
> If id is not provided, then save() works as defined now. The same for
> restore().
>
> Currently, it's not trivial to save and restore a specific state.
...and from Philip:
> I think a more convenient syntax would be:
>   var state = ctx.save();
>   ctx.restore(state);
> But how would it interact with normal calls to ctx.restore()?
  -->

  <h6 id="transformations"><span class="secno">4.7.11.1.2. </span><dfn id="transformations0" title="dom-context-2d-transformation">Transformations</dfn></h6>

  <p>The transformation matrix is applied to coordinates when creating shapes
   and paths.</p>
  <!-- conformance criteria for actual drawing
  are described in the various sections below -->

  <p>When the context is created, the transformation matrix must initially be
   the identity transform. It may then be adjusted using the transformation
   methods.

  </p><p>The transformations must be performed in reverse order. For instance, if
   a scale transformation that doubles the width is applied, followed by a
   rotation transformation that rotates drawing operations by a quarter turn,
   and a rectangle twice as wide as it is tall is then drawn on the canvas,
   the actual result will be a square<span class="testrefs kw-none" id="testrefs.2d.transformation.order"> <a href="#testrefs.2d.transformation.order" title="2d.transformation.order">#</a> <a href="2d.transformation.order.html">2d.transformation.order</a> </span>.

  </p><p>The <dfn id="scale" title="dom-context-2d-scale"><code>scale(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must add the
   scaling transformation described by the arguments to the transformation
   matrix<span class="testrefs kw-must" id="testrefs.2d.transformation.scale"> <a href="#testrefs.2d.transformation.scale" title="2d.transformation.scale">#</a> <a href="2d.transformation.scale.basic.html">2d.transformation.scale.basic</a> <a href="2d.transformation.scale.zero.html">2d.transformation.scale.zero</a> <a href="2d.transformation.scale.negative.html">2d.transformation.scale.negative</a> <a href="2d.transformation.scale.large.html">2d.transformation.scale.large</a> </span>. The <var title="">x</var> argument represents the scale factor in
   the horizontal direction and the <var title="">y</var> argument represents
   the scale factor in the vertical direction. The factors are multiples<span class="testrefs kw-none" id="testrefs.2d.transformation.scale.multiple"> <a href="#testrefs.2d.transformation.scale.multiple" title="2d.transformation.scale.multiple">#</a> <a href="2d.transformation.scale.multiple.html">2d.transformation.scale.multiple</a> </span>.

  </p><p>The <dfn id="rotate" title="dom-context-2d-rotate"><code>rotate(<var title="">angle</var>)</code></dfn> method must add the rotation
   transformation described by the argument to the transformation matrix<span class="testrefs kw-must" id="testrefs.2d.transformation.rotate"> <a href="#testrefs.2d.transformation.rotate" title="2d.transformation.rotate">#</a> <a href="2d.transformation.rotate.zero.html">2d.transformation.rotate.zero</a> <a href="2d.transformation.rotate.wrap.html">2d.transformation.rotate.wrap</a> <a href="2d.transformation.rotate.wrapnegative.html">2d.transformation.rotate.wrapnegative</a> </span>. The
   <var title="">angle</var> argument represents a clockwise rotation angle<span class="testrefs kw-none" id="testrefs.2d.transformation.rotate.direction"> <a href="#testrefs.2d.transformation.rotate.direction" title="2d.transformation.rotate.direction">#</a> <a href="2d.transformation.rotate.direction.html">2d.transformation.rotate.direction</a> </span>
   expressed in radians<span class="testrefs kw-none" id="testrefs.2d.transformation.rotate.radians"> <a href="#testrefs.2d.transformation.rotate.radians" title="2d.transformation.rotate.radians">#</a> <a href="2d.transformation.rotate.radians.html">2d.transformation.rotate.radians</a> </span>. If the <var title="">angle</var> argument is
   infinite, the method call must be ignored.

  </p><p>The <dfn id="translate" title="dom-context-2d-translate"><code>translate(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must add the translation
   transformation described by the arguments to the transformation matrix<span class="testrefs kw-must" id="testrefs.2d.transformation.translate"> <a href="#testrefs.2d.transformation.translate" title="2d.transformation.translate">#</a> <a href="2d.transformation.translate.basic.html">2d.transformation.translate.basic</a> </span>.
   The <var title="">x</var> argument represents the translation distance in
   the horizontal direction and the <var title="">y</var> argument represents
   the translation distance in the vertical direction. The arguments are in
   coordinate space units.

  </p><p>The <dfn id="transform" title="dom-context-2d-transform"><code>transform(<var title="">m11</var>,
   <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>,
   <var title="">dx</var>, <var title="">dy</var>)</code></dfn> method must
   multiply<span class="testrefs kw-must" id="testrefs.2d.transformation.transform.multiply"> <a href="#testrefs.2d.transformation.transform.multiply" title="2d.transformation.transform.multiply">#</a> <a href="2d.transformation.transform.multiply.html">2d.transformation.transform.multiply</a> </span> the current transformation matrix with the matrix described by<span class="testrefs kw-must" id="testrefs.2d.transformation.transform"> <a href="#testrefs.2d.transformation.transform" title="2d.transformation.transform">#</a> <a href="2d.transformation.transform.identity.html">2d.transformation.transform.identity</a> <a href="2d.transformation.transform.skewed.html">2d.transformation.transform.skewed</a> </span>:

  </p><table class="matrix">
   <tbody>
    <tr>
     <td><var title="">m11</var>

     </td><td><var title="">m21</var>

     </td><td><var title="">dx</var>

    </td></tr><tr>
     <td><var title="">m12</var>

     </td><td><var title="">m22</var>

     </td><td><var title="">dy</var>

    </td></tr><tr>
     <td>0

     </td><td>0

     </td><td>1
  </td></tr></tbody></table>

  <p>The <dfn id="settransform" title="dom-context-2d-setTransform"><code>setTransform(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>, <var title="">dy</var>)</code></dfn> method must reset the current transform to
   the identity matrix<span class="testrefs kw-must" id="testrefs.2d.transformation.setTransform.identity"> <a href="#testrefs.2d.transformation.setTransform.identity" title="2d.transformation.setTransform.identity">#</a> <a href="2d.transformation.setTransform.multiple.html">2d.transformation.setTransform.multiple</a> </span>, and then invoke the <code><a href="#transform" title="dom-context-2d-transform">transform</a>(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>, <var title="">dy</var>)</code> method with the same
   arguments<span class="testrefs kw-must" id="testrefs.2d.transformation.setTransform"> <a href="#testrefs.2d.transformation.setTransform" title="2d.transformation.setTransform">#</a> <a href="2d.transformation.setTransform.skewed.html">2d.transformation.setTransform.skewed</a> </span>.

  </p><h6 id="compositing"><span class="secno">4.7.11.1.3. </span>Compositing</h6>

  <p>All drawing operations are affected by the global compositing
   attributes, <code title="dom-context-2d-globalAlpha"><a href="#globalalpha">globalAlpha</a></code> and <code title="dom-context-2d-globalCompositeOperation"><a href="#globalcompositeoperation">globalCompositeOperation</a></code><span class="testrefs kw-none" id="testrefs.2d.composite.operation"> <a href="#testrefs.2d.composite.operation" title="2d.composite.operation">#</a> <a href="2d.composite.operation.get.html">2d.composite.operation.get</a> </span>.</p>
  <!-- conformance criteria for painting are described in the "drawing
  model" section below -->

  <p>The <dfn id="globalalpha" title="dom-context-2d-globalAlpha"><code>globalAlpha</code></dfn> attribute
   gives an alpha value that is applied to shapes<span class="testrefs kw-none" id="testrefs.2d.composite.globalAlpha.shape"> <a href="#testrefs.2d.composite.globalAlpha.shape" title="2d.composite.globalAlpha.shape">#</a> <a href="2d.composite.globalAlpha.fill.html">2d.composite.globalAlpha.fill</a> </span> and images<span class="testrefs kw-none" id="testrefs.2d.composite.globalAlpha.image"> <a href="#testrefs.2d.composite.globalAlpha.image" title="2d.composite.globalAlpha.image">#</a> <a href="2d.composite.globalAlpha.image.html">2d.composite.globalAlpha.image</a> <a href="2d.composite.globalAlpha.canvas.html">2d.composite.globalAlpha.canvas</a> <a href="2d.composite.globalAlpha.imagepattern.html">2d.composite.globalAlpha.imagepattern</a> <a href="2d.composite.globalAlpha.canvaspattern.html">2d.composite.globalAlpha.canvaspattern</a> </span> before they are
   composited onto the canvas. The value must be in the range from 0.0 (fully
   transparent) to 1.0 (no additional transparency). If an attempt is made to
   set the attribute to a value outside this range, the attribute must retain
   its previous value<span class="testrefs kw-must" id="testrefs.2d.composite.globalAlpha.range"> <a href="#testrefs.2d.composite.globalAlpha.range" title="2d.composite.globalAlpha.range">#</a> <a href="2d.composite.globalAlpha.range.html">2d.composite.globalAlpha.range</a> <a href="2d.composite.globalAlpha.invalid.html">2d.composite.globalAlpha.invalid</a> </span>. When the context is created, the <code title="dom-context-2d-globalAlpha"><a href="#globalalpha">globalAlpha</a></code> attribute must initially have
   the value 1.0<span class="testrefs kw-must" id="testrefs.2d.composite.globalAlpha.default"> <a href="#testrefs.2d.composite.globalAlpha.default" title="2d.composite.globalAlpha.default">#</a> <a href="2d.composite.globalAlpha.default.html">2d.composite.globalAlpha.default</a> </span>.

  </p><p>The <dfn id="globalcompositeoperation" title="dom-context-2d-globalCompositeOperation"><code>globalCompositeOperation</code></dfn>
   attribute sets how shapes and images are drawn onto the existing bitmap,
   once they have had <code title="dom-context-2d-globalAlpha"><a href="#globalalpha">globalAlpha</a></code> and the current transformation
   matrix applied. It must be set to a value from the following list. In the
   descriptions below, the source image, <var title="">A</var>, is the shape
   or image being rendered, and the destination image, <var title="">B</var>,
   is the current state of the bitmap.

  </p><dl>
   <dt><dfn id="source-atop" title="gcop-source-atop"><code>source-atop</code></dfn><span class="testrefs kw-none" id="testrefs.2d.composite.source-atop"> <a href="#testrefs.2d.composite.source-atop" title="2d.composite.source-atop">#</a> <a href="2d.composite.solid.source-atop.html">2d.composite.solid.source-atop</a> <a href="2d.composite.transparent.source-atop.html">2d.composite.transparent.source-atop</a> <a href="2d.composite.image.source-atop.html">2d.composite.image.source-atop</a> <a href="2d.composite.canvas.source-atop.html">2d.composite.canvas.source-atop</a> <a href="2d.composite.clip.source-atop.html">2d.composite.clip.source-atop</a> </span>

   </dt><dd><var title="">A</var> atop <var title="">B</var>. Display the source
    image wherever both images are opaque. Display the destination image
    wherever the destination image is opaque but the source image is
    transparent. Display transparency elsewhere.

   </dd><dt><dfn id="source-in" title="gcop-source-in"><code>source-in</code></dfn><span class="testrefs kw-none" id="testrefs.2d.composite.source-in"> <a href="#testrefs.2d.composite.source-in" title="2d.composite.source-in">#</a> <a href="2d.composite.solid.source-in.html">2d.composite.solid.source-in</a> <a href="2d.composite.transparent.source-in.html">2d.composite.transparent.source-in</a> <a href="2d.composite.image.source-in.html">2d.composite.image.source-in</a> <a href="2d.composite.canvas.source-in.html">2d.composite.canvas.source-in</a> <a href="2d.composite.uncovered.fill.source-in.html">2d.composite.uncovered.fill.source-in</a> <a href="2d.composite.uncovered.image.source-in.html">2d.composite.uncovered.image.source-in</a> <a href="2d.composite.uncovered.pattern.source-in.html">2d.composite.uncovered.pattern.source-in</a> <a href="2d.composite.clip.source-in.html">2d.composite.clip.source-in</a> </span>

   </dt><dd><var title="">A</var> in <var title="">B</var>. Display the source
    image wherever both the source image and destination image are opaque.
    Display transparency elsewhere.

   </dd><dt><dfn id="source-out" title="gcop-source-out"><code>source-out</code></dfn><span class="testrefs kw-none" id="testrefs.2d.composite.source-out"> <a href="#testrefs.2d.composite.source-out" title="2d.composite.source-out">#</a> <a href="2d.composite.solid.source-out.html">2d.composite.solid.source-out</a> <a href="2d.composite.transparent.source-out.html">2d.composite.transparent.source-out</a> <a href="2d.composite.image.source-out.html">2d.composite.image.source-out</a> <a href="2d.composite.canvas.source-out.html">2d.composite.canvas.source-out</a> <a href="2d.composite.uncovered.fill.source-out.html">2d.composite.uncovered.fill.source-out</a> <a href="2d.composite.uncovered.image.source-out.html">2d.composite.uncovered.image.source-out</a> <a href="2d.composite.uncovered.pattern.source-out.html">2d.composite.uncovered.pattern.source-out</a> <a href="2d.composite.clip.source-out.html">2d.composite.clip.source-out</a> </span>

   </dt><dd><var title="">A</var> out <var title="">B</var>. Display the source
    image wherever the source image is opaque and the destination image is
    transparent. Display transparency elsewhere.

   </dd><dt><dfn id="source-over" title="gcop-source-over"><code>source-over</code></dfn><span class="testrefs kw-none" id="testrefs.2d.composite.source-over"> <a href="#testrefs.2d.composite.source-over" title="2d.composite.source-over">#</a> <a href="2d.composite.solid.source-over.html">2d.composite.solid.source-over</a> <a href="2d.composite.transparent.source-over.html">2d.composite.transparent.source-over</a> <a href="2d.composite.image.source-over.html">2d.composite.image.source-over</a> <a href="2d.composite.canvas.source-over.html">2d.composite.canvas.source-over</a> <a href="2d.composite.clip.source-over.html">2d.composite.clip.source-over</a> </span> (default)

   </dt><dd><var title="">A</var> over <var title="">B</var>. Display the source
    image wherever the source image is opaque. Display the destination image
    elsewhere.

   </dd><dt><dfn id="destination-atop" title="gcop-destination-atop"><code>destination-atop</code></dfn><span class="testrefs kw-none" id="testrefs.2d.composite.destination-atop"> <a href="#testrefs.2d.composite.destination-atop" title="2d.composite.destination-atop">#</a> <a href="2d.composite.solid.destination-atop.html">2d.composite.solid.destination-atop</a> <a href="2d.composite.transparent.destination-atop.html">2d.composite.transparent.destination-atop</a> <a href="2d.composite.image.destination-atop.html">2d.composite.image.destination-atop</a> <a href="2d.composite.canvas.destination-atop.html">2d.composite.canvas.destination-atop</a> <a href="2d.composite.uncovered.fill.destination-atop.html">2d.composite.uncovered.fill.destination-atop</a> <a href="2d.composite.uncovered.image.destination-atop.html">2d.composite.uncovered.image.destination-atop</a> <a href="2d.composite.uncovered.pattern.destination-atop.html">2d.composite.uncovered.pattern.destination-atop</a> <a href="2d.composite.clip.destination-atop.html">2d.composite.clip.destination-atop</a> </span>

   </dt><dd><var title="">B</var> atop <var title="">A</var>. Same as <code title="gcop-source-atop"><a href="#source-atop">source-atop</a></code> but
    using the destination image instead of the source image and vice versa.

   </dd><dt><dfn id="destination-in" title="gcop-destination-in"><code>destination-in</code></dfn><span class="testrefs kw-none" id="testrefs.2d.composite.destination-in"> <a href="#testrefs.2d.composite.destination-in" title="2d.composite.destination-in">#</a> <a href="2d.composite.solid.destination-in.html">2d.composite.solid.destination-in</a> <a href="2d.composite.transparent.destination-in.html">2d.composite.transparent.destination-in</a> <a href="2d.composite.image.destination-in.html">2d.composite.image.destination-in</a> <a href="2d.composite.canvas.destination-in.html">2d.composite.canvas.destination-in</a> <a href="2d.composite.uncovered.fill.destination-in.html">2d.composite.uncovered.fill.destination-in</a> <a href="2d.composite.uncovered.image.destination-in.html">2d.composite.uncovered.image.destination-in</a> <a href="2d.composite.uncovered.pattern.destination-in.html">2d.composite.uncovered.pattern.destination-in</a> <a href="2d.composite.clip.destination-in.html">2d.composite.clip.destination-in</a> </span>

   </dt><dd><var title="">B</var> in <var title="">A</var>. Same as <code title="gcop-source-in"><a href="#source-in">source-in</a></code> but using
    the destination image instead of the source image and vice versa.

   </dd><dt><dfn id="destination-out" title="gcop-destination-out"><code>destination-out</code></dfn><span class="testrefs kw-none" id="testrefs.2d.composite.destination-out"> <a href="#testrefs.2d.composite.destination-out" title="2d.composite.destination-out">#</a> <a href="2d.composite.solid.destination-out.html">2d.composite.solid.destination-out</a> <a href="2d.composite.transparent.destination-out.html">2d.composite.transparent.destination-out</a> <a href="2d.composite.image.destination-out.html">2d.composite.image.destination-out</a> <a href="2d.composite.canvas.destination-out.html">2d.composite.canvas.destination-out</a> <a href="2d.composite.clip.destination-out.html">2d.composite.clip.destination-out</a> </span>

   </dt><dd><var title="">B</var> out <var title="">A</var>. Same as <code title="gcop-source-out"><a href="#source-out">source-out</a></code> but
    using the destination image instead of the source image and vice versa.

   </dd><dt><dfn id="destination-over" title="gcop-destination-over"><code>destination-over</code></dfn><span class="testrefs kw-none" id="testrefs.2d.composite.destination-over"> <a href="#testrefs.2d.composite.destination-over" title="2d.composite.destination-over">#</a> <a href="2d.composite.solid.destination-over.html">2d.composite.solid.destination-over</a> <a href="2d.composite.transparent.destination-over.html">2d.composite.transparent.destination-over</a> <a href="2d.composite.image.destination-over.html">2d.composite.image.destination-over</a> <a href="2d.composite.canvas.destination-over.html">2d.composite.canvas.destination-over</a> <a href="2d.composite.clip.destination-over.html">2d.composite.clip.destination-over</a> </span>

   </dt><dd><var title="">B</var> over <var title="">A</var>. Same as <code title="gcop-source-over"><a href="#source-over">source-over</a></code> but
    using the destination image instead of the source image and vice versa.</dd>
   <!-- no clear definition of this operator (doesn't correspond to a PorterDuff operator)
   <dt><dfn title="gcop-darker"><code>darker</code></dfn></dt>

   <dd>Display the sum of the source image and destination image,
   with color values approaching 0 as a limit.</dd>
-->

   <dt><dfn id="lighter" title="gcop-lighter"><code>lighter</code></dfn><span class="testrefs kw-none" id="testrefs.2d.composite.lighter"> <a href="#testrefs.2d.composite.lighter" title="2d.composite.lighter">#</a> <a href="2d.composite.solid.lighter.html">2d.composite.solid.lighter</a> <a href="2d.composite.transparent.lighter.html">2d.composite.transparent.lighter</a> <a href="2d.composite.image.lighter.html">2d.composite.image.lighter</a> <a href="2d.composite.canvas.lighter.html">2d.composite.canvas.lighter</a> <a href="2d.composite.clip.lighter.html">2d.composite.clip.lighter</a> </span>

   </dt><dd><var title="">A</var> plus <var title="">B</var>. Display the sum of
    the source image and destination image, with color values approaching 1
    as a limit.

   </dd><dt><dfn id="copy" title="gcop-copy"><code>copy</code></dfn><span class="testrefs kw-none" id="testrefs.2d.composite.copy"> <a href="#testrefs.2d.composite.copy" title="2d.composite.copy">#</a> <a href="2d.composite.solid.copy.html">2d.composite.solid.copy</a> <a href="2d.composite.transparent.copy.html">2d.composite.transparent.copy</a> <a href="2d.composite.image.copy.html">2d.composite.image.copy</a> <a href="2d.composite.canvas.copy.html">2d.composite.canvas.copy</a> <a href="2d.composite.uncovered.fill.copy.html">2d.composite.uncovered.fill.copy</a> <a href="2d.composite.uncovered.image.copy.html">2d.composite.uncovered.image.copy</a> <a href="2d.composite.uncovered.pattern.copy.html">2d.composite.uncovered.pattern.copy</a> <a href="2d.composite.clip.copy.html">2d.composite.clip.copy</a> </span>

   </dt><dd><var title="">A</var> (<var title="">B</var> is ignored). Display the
    source image instead of the destination image.

   </dd><dt><dfn id="xor" title="gcop-xor"><code>xor</code></dfn><span class="testrefs kw-none" id="testrefs.2d.composite.xor"> <a href="#testrefs.2d.composite.xor" title="2d.composite.xor">#</a> <a href="2d.composite.solid.xor.html">2d.composite.solid.xor</a> <a href="2d.composite.transparent.xor.html">2d.composite.transparent.xor</a> <a href="2d.composite.image.xor.html">2d.composite.image.xor</a> <a href="2d.composite.canvas.xor.html">2d.composite.canvas.xor</a> <a href="2d.composite.clip.xor.html">2d.composite.clip.xor</a> </span>

   </dt><dd><var title="">A</var> xor <var title="">B</var>. Exclusive OR of the
    source image and destination image.

   </dd><dt><code><var title="">vendorName</var>-<var title="">operationName</var></code>

   </dt><dd>Vendor-specific extensions to the list of composition operators should
    use this syntax.
  </dd></dl>

  <p>These values are all case-sensitive<span class="testrefs kw-must" id="testrefs.2d.composite.operation.casesensitive"> <a href="#testrefs.2d.composite.operation.casesensitive" title="2d.composite.operation.casesensitive">#</a> <a href="2d.composite.operation.casesensitive.html">2d.composite.operation.casesensitive</a> </span> — they must be used exactly as
   shown. User agents must not recognize values that do not exactly match the
   values given above<span class="testrefs kw-must" id="testrefs.2d.composite.operation.exact"> <a href="#testrefs.2d.composite.operation.exact" title="2d.composite.operation.exact">#</a> <a href="2d.composite.operation.nullsuffix.html">2d.composite.operation.nullsuffix</a> </span>.

  </p><p>The operators in the above list must be treated as described by the
   Porter-Duff operator given at the start of their description (e.g. <var title="">A</var> over <var title="">B</var>). <a href="#refsPORTERDUFF">[PORTERDUFF]</a></p>
  <!--
        <dd id="refsPORTERDUFF">[PORTERDUFF]</dd>
        <dd><cite>Compositing Digital Images</cite>, SIGGRAPH '84: Proceedings of the 11th annual conference on Computer graphics and interactive techniques, Volume 18, Number 3, T. Porter, T Duff. ACM Press, July 1984. ISBN 0-89791-138-5.</dd>
  -->

  <p>On setting, if the user agent does not recognize the specified value, it
   must be ignored, leaving the value of <code title="dom-context-2d-globalCompositeOperation"><a href="#globalcompositeoperation">globalCompositeOperation</a></code>
   unaffected<span class="testrefs kw-must" id="testrefs.2d.composite.operation.unrecognised"> <a href="#testrefs.2d.composite.operation.unrecognised" title="2d.composite.operation.unrecognised">#</a> <a href="2d.composite.operation.unrecognised.html">2d.composite.operation.unrecognised</a> <a href="2d.composite.operation.darker.html">2d.composite.operation.darker</a> <a href="2d.composite.operation.over.html">2d.composite.operation.over</a> <a href="2d.composite.operation.clear.html">2d.composite.operation.clear</a> <a href="2d.composite.operation.highlight.html">2d.composite.operation.highlight</a> </span>.

  </p><p>When the context is created, the <code title="dom-context-2d-globalCompositeOperation"><a href="#globalcompositeoperation">globalCompositeOperation</a></code>
   attribute must initially have the value <code>source-over</code><span class="testrefs kw-must" id="testrefs.2d.composite.operation.default"> <a href="#testrefs.2d.composite.operation.default" title="2d.composite.operation.default">#</a> <a href="2d.composite.operation.default.html">2d.composite.operation.default</a> </span>.

  </p><h6 id="colors"><span class="secno">4.7.11.1.4. </span>Colors and styles</h6>

  <p>The <dfn id="strokestyle" title="dom-context-2d-strokeStyle"><code>strokeStyle</code></dfn> attribute
   represents the color or style to use for the lines around shapes, and the
   <dfn id="fillstyle" title="dom-context-2d-fillStyle"><code>fillStyle</code></dfn> attribute
   represents the color or style to use inside the shapes.

  </p><p>Both attributes can be either strings, <code><a href="#canvasgradient">CanvasGradient</a></code>s, or <code><a href="#canvaspattern0">CanvasPattern</a></code>s. On setting, strings must
   be parsed as CSS &lt;color&gt; values and the color assigned<span class="testrefs kw-must" id="testrefs.2d.colours.parse"> <a href="#testrefs.2d.colours.parse" title="2d.colours.parse">#</a> <a href="2d.fillStyle.parse.html4.html">2d.fillStyle.parse.html4</a> <a href="2d.fillStyle.parse.hex3.html">2d.fillStyle.parse.hex3</a> <a href="2d.fillStyle.parse.hex6.html">2d.fillStyle.parse.hex6</a> <a href="2d.fillStyle.parse.rgb-num.html">2d.fillStyle.parse.rgb-num</a> <a href="2d.fillStyle.parse.rgb-clamp-1.html">2d.fillStyle.parse.rgb-clamp-1</a> <a href="2d.fillStyle.parse.rgb-clamp-2.html">2d.fillStyle.parse.rgb-clamp-2</a> <a href="2d.fillStyle.parse.rgb-clamp-3.html">2d.fillStyle.parse.rgb-clamp-3</a> <a href="2d.fillStyle.parse.rgb-clamp-4.html">2d.fillStyle.parse.rgb-clamp-4</a> <a href="2d.fillStyle.parse.rgb-clamp-5.html">2d.fillStyle.parse.rgb-clamp-5</a> <a href="2d.fillStyle.parse.rgb-percent.html">2d.fillStyle.parse.rgb-percent</a> <a href="2d.fillStyle.parse.rgba-solid-1.html">2d.fillStyle.parse.rgba-solid-1</a> <a href="2d.fillStyle.parse.rgba-solid-2.html">2d.fillStyle.parse.rgba-solid-2</a> <a href="2d.fillStyle.parse.rgba-num-1.html">2d.fillStyle.parse.rgba-num-1</a> <a href="2d.fillStyle.parse.rgba-num-2.html">2d.fillStyle.parse.rgba-num-2</a> <a href="2d.fillStyle.parse.rgba-percent.html">2d.fillStyle.parse.rgba-percent</a> <a href="2d.fillStyle.parse.rgba-clamp-1.html">2d.fillStyle.parse.rgba-clamp-1</a> <a href="2d.fillStyle.parse.rgba-clamp-2.html">2d.fillStyle.parse.rgba-clamp-2</a> <a href="2d.fillStyle.parse.transparent-1.html">2d.fillStyle.parse.transparent-1</a> <a href="2d.fillStyle.parse.transparent-2.html">2d.fillStyle.parse.transparent-2</a> <a href="2d.fillStyle.parse.hsl-1.html">2d.fillStyle.parse.hsl-1</a> <a href="2d.fillStyle.parse.hsl-2.html">2d.fillStyle.parse.hsl-2</a> <a href="2d.fillStyle.parse.hsl-3.html">2d.fillStyle.parse.hsl-3</a> <a href="2d.fillStyle.parse.hsl-4.html">2d.fillStyle.parse.hsl-4</a> <a href="2d.fillStyle.parse.hsl-5.html">2d.fillStyle.parse.hsl-5</a> <a href="2d.fillStyle.parse.hsl-clamp-1.html">2d.fillStyle.parse.hsl-clamp-1</a> <a href="2d.fillStyle.parse.hsl-clamp-2.html">2d.fillStyle.parse.hsl-clamp-2</a> <a href="2d.fillStyle.parse.hsl-clamp-3.html">2d.fillStyle.parse.hsl-clamp-3</a> <a href="2d.fillStyle.parse.hsl-clamp-4.html">2d.fillStyle.parse.hsl-clamp-4</a> <a href="2d.fillStyle.parse.hsla-1.html">2d.fillStyle.parse.hsla-1</a> <a href="2d.fillStyle.parse.hsla-2.html">2d.fillStyle.parse.hsla-2</a> <a href="2d.fillStyle.parse.hsla-clamp-1.html">2d.fillStyle.parse.hsla-clamp-1</a> <a href="2d.fillStyle.parse.hsla-clamp-2.html">2d.fillStyle.parse.hsla-clamp-2</a> <a href="2d.fillStyle.parse.hsla-clamp-3.html">2d.fillStyle.parse.hsla-clamp-3</a> <a href="2d.fillStyle.parse.hsla-clamp-4.html">2d.fillStyle.parse.hsla-clamp-4</a> <a href="2d.fillStyle.parse.hsla-clamp-5.html">2d.fillStyle.parse.hsla-clamp-5</a> <a href="2d.fillStyle.parse.hsla-clamp-6.html">2d.fillStyle.parse.hsla-clamp-6</a> <a href="2d.fillStyle.parse.svg-1.html">2d.fillStyle.parse.svg-1</a> <a href="2d.fillStyle.parse.svg-2.html">2d.fillStyle.parse.svg-2</a> <a href="2d.fillStyle.parse.invalid.hex3.html">2d.fillStyle.parse.invalid.hex3</a> <a href="2d.fillStyle.parse.invalid.hex6.html">2d.fillStyle.parse.invalid.hex6</a> <a href="2d.fillStyle.parse.invalid.rgb-1.html">2d.fillStyle.parse.invalid.rgb-1</a> <a href="2d.fillStyle.parse.invalid.rgb-2.html">2d.fillStyle.parse.invalid.rgb-2</a> <a href="2d.fillStyle.parse.invalid.rgb-3.html">2d.fillStyle.parse.invalid.rgb-3</a> <a href="2d.fillStyle.parse.invalid.rgb-4.html">2d.fillStyle.parse.invalid.rgb-4</a> <a href="2d.fillStyle.parse.invalid.rgb-5.html">2d.fillStyle.parse.invalid.rgb-5</a> <a href="2d.fillStyle.parse.invalid.rgb-6.html">2d.fillStyle.parse.invalid.rgb-6</a> <a href="2d.fillStyle.parse.invalid.rgb-7.html">2d.fillStyle.parse.invalid.rgb-7</a> <a href="2d.fillStyle.parse.invalid.rgba-1.html">2d.fillStyle.parse.invalid.rgba-1</a> <a href="2d.fillStyle.parse.invalid.rgba-2.html">2d.fillStyle.parse.invalid.rgba-2</a> <a href="2d.fillStyle.parse.invalid.rgba-3.html">2d.fillStyle.parse.invalid.rgba-3</a> <a href="2d.fillStyle.parse.invalid.rgba-4.html">2d.fillStyle.parse.invalid.rgba-4</a> <a href="2d.fillStyle.parse.invalid.rgba-5.html">2d.fillStyle.parse.invalid.rgba-5</a> <a href="2d.fillStyle.parse.invalid.hsl-1.html">2d.fillStyle.parse.invalid.hsl-1</a> <a href="2d.fillStyle.parse.invalid.hsl-2.html">2d.fillStyle.parse.invalid.hsl-2</a> <a href="2d.fillStyle.parse.invalid.hsl-3.html">2d.fillStyle.parse.invalid.hsl-3</a> <a href="2d.fillStyle.parse.invalid.hsl-4.html">2d.fillStyle.parse.invalid.hsl-4</a> <a href="2d.fillStyle.parse.invalid.hsl-5.html">2d.fillStyle.parse.invalid.hsl-5</a> <a href="2d.fillStyle.parse.invalid.hsla-1.html">2d.fillStyle.parse.invalid.hsla-1</a> <a href="2d.fillStyle.parse.invalid.hsla-2.html">2d.fillStyle.parse.invalid.hsla-2</a> <a href="2d.fillStyle.parse.system.html">2d.fillStyle.parse.system</a> <a href="2d.fillStyle.parse.current.basic.html">2d.fillStyle.parse.current.basic</a> <a href="2d.fillStyle.parse.current.changed.html">2d.fillStyle.parse.current.changed</a> <a href="2d.fillStyle.parse.current.removed.html">2d.fillStyle.parse.current.removed</a> </span>, and <code><a href="#canvasgradient">CanvasGradient</a></code> and <code><a href="#canvaspattern0">CanvasPattern</a></code> objects must be assigned
   themselves. <a href="#refsCSS3COLOR">[CSS3COLOR]</a> If the value is a
   string but is not a valid color<span class="testrefs kw-must" id="testrefs.2d.colours.invalidstring"> <a href="#testrefs.2d.colours.invalidstring" title="2d.colours.invalidstring">#</a> <a href="2d.fillStyle.invalidstring.html">2d.fillStyle.invalidstring</a> </span>, or is neither a string, a <code><a href="#canvasgradient">CanvasGradient</a></code>, nor a <code><a href="#canvaspattern0">CanvasPattern</a></code><span class="testrefs kw-must" id="testrefs.2d.colours.invalidtype"> <a href="#testrefs.2d.colours.invalidtype" title="2d.colours.invalidtype">#</a> <a href="2d.fillStyle.invalidtype.html">2d.fillStyle.invalidtype</a> </span>, then it must be ignored,
   and the attribute must retain its previous value.

  </p><p>On getting, if the value is a color, then the <a href="#serialization" title="serialization of a color">serialization of the color</a> must be
   returned. Otherwise, if it is not a color but a <code><a href="#canvasgradient">CanvasGradient</a></code><span class="testrefs kw-must" id="testrefs.2d.gradient.object"> <a href="#testrefs.2d.gradient.object" title="2d.gradient.object">#</a> <a href="2d.gradient.object.compare.html">2d.gradient.object.compare</a> </span> or <code><a href="#canvaspattern0">CanvasPattern</a></code><span class="testrefs kw-must" id="testrefs.2d.pattern.object"> <a href="#testrefs.2d.pattern.object" title="2d.pattern.object">#</a> </span>, then the respective
   object must be returned. (Such objects are opaque and therefore only
   useful for assigning to other attributes or for comparison to other
   gradients or patterns.)

  </p><p>The <dfn id="serialization">serialization of a color</dfn> for a color
   value is a string, computed as follows: if it has alpha equal to 1.0, then
   the string is a lowercase six-digit hex value<span class="testrefs kw-none" id="testrefs.2d.colours.getcolour.solid"> <a href="#testrefs.2d.colours.getcolour.solid" title="2d.colours.getcolour.solid">#</a> <a href="2d.fillStyle.get.solid.html">2d.fillStyle.get.solid</a> </span>, prefixed with a &quot;#&quot;
   character (U+0023 NUMBER SIGN), with the first two digits representing the
   red component, the next two digits representing the green component, and
   the last two digits representing the blue component, the digits being in
   the range 0-9 a-f (U+0030 to U+0039 and U+0061 to U+0066). Otherwise, the
   color value has alpha less than 1.0, and the string is the color value in
   the CSS <code title="">rgba()</code> functional-notation format: the
   literal string <code title="">rgba</code> (U+0072 U+0067 U+0062 U+0061)
   followed by a U+0028 LEFT PARENTHESIS, a base-ten integer in the range
   0-255 representing the red component (using digits 0-9, U+0030 to U+0039,
   in the shortest form possible), a literal U+002C COMMA and U+0020 SPACE,
   an integer for the green component, a comma and a space, an integer for
   the blue component, another comma and space, a U+0030 DIGIT ZERO, a U+002E
   FULL STOP (representing the decimal point), one or more digits in the
   range 0-9 (U+0030 to U+0039) representing the fractional part of the alpha
   value, and finally a U+0029 RIGHT PARENTHESIS<span class="testrefs kw-none" id="testrefs.2d.colours.getcolour.transparent"> <a href="#testrefs.2d.colours.getcolour.transparent" title="2d.colours.getcolour.transparent">#</a> <a href="2d.fillStyle.get.semitransparent.html">2d.fillStyle.get.semitransparent</a> <a href="2d.fillStyle.get.transparent.html">2d.fillStyle.get.transparent</a> </span>.

  </p><p>When the context is created, the <code title="dom-context-2d-strokeStyle"><a href="#strokestyle">strokeStyle</a></code> and <code title="dom-context-2d-fillStyle"><a href="#fillstyle">fillStyle</a></code>
   attributes must initially have the string value <code title="">#000000</code><span class="testrefs kw-must" id="testrefs.2d.colours.default"> <a href="#testrefs.2d.colours.default" title="2d.colours.default">#</a> <a href="2d.fillStyle.default.html">2d.fillStyle.default</a> <a href="2d.strokeStyle.default.html">2d.strokeStyle.default</a> </span>.

  </p><p>There are two types of gradients, linear gradients and radial gradients,
   both represented by objects implementing the opaque <code><a href="#canvasgradient">CanvasGradient</a></code> interface.

  </p><p id="interpolation">Once a gradient has been created (see below), stops are
   placed along it to define how the colors are distributed along the
   gradient. The color of the gradient at each stop is the color specified
   for that stop. Between each such stop, the colors and the alpha component
   must be linearly interpolated<span class="testrefs kw-must" id="testrefs.2d.gradient.interpolate.linear"> <a href="#testrefs.2d.gradient.interpolate.linear" title="2d.gradient.interpolate.linear">#</a> <a href="2d.gradient.interpolate.solid.html">2d.gradient.interpolate.solid</a> <a href="2d.gradient.interpolate.colour.html">2d.gradient.interpolate.colour</a> <a href="2d.gradient.interpolate.alpha.html">2d.gradient.interpolate.alpha</a> <a href="2d.gradient.interpolate.vertical.html">2d.gradient.interpolate.vertical</a> <a href="2d.gradient.interpolate.multiple.html">2d.gradient.interpolate.multiple</a> </span> over the RGBA space without premultiplying
   the alpha value<span class="testrefs kw-must" id="testrefs.2d.gradient.interpolate.alpha"> <a href="#testrefs.2d.gradient.interpolate.alpha" title="2d.gradient.interpolate.alpha">#</a> <a href="2d.gradient.interpolate.colouralpha.html">2d.gradient.interpolate.colouralpha</a> </span> to find the color to use at that offset. Before the first
   stop, the color must be the color of the first stop<span class="testrefs kw-must" id="testrefs.2d.gradient.outside.first"> <a href="#testrefs.2d.gradient.outside.first" title="2d.gradient.outside.first">#</a> <a href="2d.gradient.interpolate.outside.html">2d.gradient.interpolate.outside</a> </span>. After the last stop,
   the color must be the color of the last stop<span class="testrefs kw-must" id="testrefs.2d.gradient.outside.last"> <a href="#testrefs.2d.gradient.outside.last" title="2d.gradient.outside.last">#</a> <a href="2d.gradient.interpolate.outside.html">2d.gradient.interpolate.outside</a> </span>. When there are no stops, the
   gradient is transparent black<span class="testrefs kw-none" id="testrefs.2d.gradient.empty"> <a href="#testrefs.2d.gradient.empty" title="2d.gradient.empty">#</a> <a href="2d.gradient.empty.html">2d.gradient.empty</a> </span>.

  </p><p>The <dfn id="addcolorstop" title="dom-canvasgradient-addColorStop"><code>addColorStop(<var title="">offset</var>, <var title="">color</var>)</code></dfn> method on
   the <code><a href="#canvasgradient">CanvasGradient</a></code> interface
   adds a new stop to a gradient. If the <var title="">offset</var> is less
   than 0, greater than 1, infinite, or NaN, then an
   <code>INDEX_SIZE_ERR</code> exception must be raised<span class="testrefs kw-must" id="testrefs.2d.gradient.invalidoffset"> <a href="#testrefs.2d.gradient.invalidoffset" title="2d.gradient.invalidoffset">#</a> <a href="2d.gradient.object.invalidoffset.html">2d.gradient.object.invalidoffset</a> </span>. If the <var title="">color</var> cannot be parsed as a CSS color, then a
   <code>SYNTAX_ERR</code> exception must be raised<span class="testrefs kw-must" id="testrefs.2d.gradient.invalidcolour"> <a href="#testrefs.2d.gradient.invalidcolour" title="2d.gradient.invalidcolour">#</a> <a href="2d.gradient.object.invalidcolour.html">2d.gradient.object.invalidcolour</a> </span>. Otherwise, the gradient
   must have a new stop placed, at offset <var title="">offset</var> relative
   to the whole gradient, and with the color obtained by parsing <var title="">color</var> as a CSS &lt;color&gt; value<span class="testrefs kw-must" id="testrefs.2d.gradient.update"> <a href="#testrefs.2d.gradient.update" title="2d.gradient.update">#</a> <a href="2d.gradient.object.update.html">2d.gradient.object.update</a> </span>. If multiple stops are
   added at the same offset on a gradient, they must be placed in the order
   added, with the first one closest to the start of the gradient, and each
   subsequent one infinitesimally further along towards the end point (in
   effect causing all but the first and last stop added at each point to be
   ignored)<span class="testrefs kw-must" id="testrefs.2d.gradient.interpolate.overlap"> <a href="#testrefs.2d.gradient.interpolate.overlap" title="2d.gradient.interpolate.overlap">#</a> <a href="2d.gradient.interpolate.overlap.html">2d.gradient.interpolate.overlap</a> <a href="2d.gradient.interpolate.overlap2.html">2d.gradient.interpolate.overlap2</a> </span>.

  </p><p>The <dfn id="createlineargradient" title="dom-context-2d-createLinearGradient"><code>createLinearGradient(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>, <var title="">y1</var>)</code></dfn> method takes four arguments that represent
   the start point (<var title="">x0</var>, <var title="">y0</var>) and end
   point (<var title="">x1</var>, <var title="">y1</var>) of the gradient. If
   any of the arguments to <code title="dom-context-2d-createLinearGradient"><a href="#createlineargradient">createLinearGradient()</a></code> are
   infinite or NaN, the method must raise a <code>NOT_SUPPORTED_ERR</code>
   exception<span class="testrefs kw-must" id="testrefs.2d.gradient.linear.nonfinite"> <a href="#testrefs.2d.gradient.linear.nonfinite" title="2d.gradient.linear.nonfinite">#</a> <a href="2d.gradient.linear.nonfinite.html">2d.gradient.linear.nonfinite</a> </span>. Otherwise, the method must return a linear <code><a href="#canvasgradient">CanvasGradient</a></code><span class="testrefs kw-must" id="testrefs.2d.gradient.return.linear"> <a href="#testrefs.2d.gradient.return.linear" title="2d.gradient.return.linear">#</a> <a href="2d.gradient.object.return.html">2d.gradient.object.return</a> </span> initialized with the
   specified line.

  </p><p>Linear gradients must be rendered such that all points on a line
   perpendicular to the line that crosses the start and end points have the
   color at the point where those two lines cross (with the colors coming
   from the <a href="#interpolation">interpolation and extrapolation</a>
   described above). The points in the linear gradient must be transformed as
   described by the <a href="#transformations0" title="dom-context-2d-transformation">current transformation matrix</a> when
   rendering<span class="testrefs kw-must" id="testrefs.2d.gradient.linear.transform"> <a href="#testrefs.2d.gradient.linear.transform" title="2d.gradient.linear.transform">#</a> <a href="2d.gradient.linear.transform.1.html">2d.gradient.linear.transform.1</a> <a href="2d.gradient.linear.transform.2.html">2d.gradient.linear.transform.2</a> <a href="2d.gradient.linear.transform.3.html">2d.gradient.linear.transform.3</a> </span>.

  </p><p>If <span><var title="">x<sub>0</sub></var> = <var title="">x<sub>1</sub></var></span> and <span><var title="">y<sub>0</sub></var> = <var title="">y<sub>1</sub></var></span>, then the linear gradient must paint
   nothing<span class="testrefs kw-must" id="testrefs.2d.gradient.linear.zerosize"> <a href="#testrefs.2d.gradient.linear.zerosize" title="2d.gradient.linear.zerosize">#</a> <a href="2d.gradient.interpolate.zerosize.html">2d.gradient.interpolate.zerosize</a> </span>.</p>
  <!-- XXX could make this paint the start color,
  or the end color, or raise an exception -->

  <p>The <dfn id="createradialgradient" title="dom-context-2d-createRadialGradient"><code>createRadialGradient(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>, <var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</code></dfn> method takes six arguments, the first
   three representing the start circle with origin (<var title="">x0</var>,
   <var title="">y0</var>) and radius <var title="">r0</var>, and the last
   three representing the end circle with origin (<var title="">x1</var>,
   <var title="">y1</var>) and radius <var title="">r1</var>. The values are
   in coordinate space units. If any of the arguments are infinite or NaN, a
   <code>NOT_SUPPORTED_ERR</code> exception must be raised<span class="testrefs kw-must" id="testrefs.2d.gradient.radial.nonfinite"> <a href="#testrefs.2d.gradient.radial.nonfinite" title="2d.gradient.radial.nonfinite">#</a> <a href="2d.gradient.radial.nonfinite.html">2d.gradient.radial.nonfinite</a> </span>. If either of <var title="">r0</var> or <var title="">r1</var> are negative, an
   <code>INDEX_SIZE_ERR</code> exception must be raised<span class="testrefs kw-must" id="testrefs.2d.gradient.radial.negative"> <a href="#testrefs.2d.gradient.radial.negative" title="2d.gradient.radial.negative">#</a> <a href="2d.gradient.radial.negative.html">2d.gradient.radial.negative</a> </span>. Otherwise, the
   method must return a radial <code><a href="#canvasgradient">CanvasGradient</a></code><span class="testrefs kw-must" id="testrefs.2d.gradient.return.radial"> <a href="#testrefs.2d.gradient.return.radial" title="2d.gradient.return.radial">#</a> <a href="2d.gradient.object.return.html">2d.gradient.object.return</a> </span> initialized with the two
   specified circles.

  </p><p>Radial gradients must be rendered by following these steps<span class="testrefs kw-must" id="testrefs.2d.gradient.radial.rendering"> <a href="#testrefs.2d.gradient.radial.rendering" title="2d.gradient.radial.rendering">#</a> <a href="2d.gradient.radial.inside1.html">2d.gradient.radial.inside1</a> <a href="2d.gradient.radial.inside2.html">2d.gradient.radial.inside2</a> <a href="2d.gradient.radial.inside3.html">2d.gradient.radial.inside3</a> <a href="2d.gradient.radial.outside1.html">2d.gradient.radial.outside1</a> <a href="2d.gradient.radial.outside2.html">2d.gradient.radial.outside2</a> <a href="2d.gradient.radial.outside3.html">2d.gradient.radial.outside3</a> <a href="2d.gradient.radial.touch1.html">2d.gradient.radial.touch1</a> <a href="2d.gradient.radial.touch2.html">2d.gradient.radial.touch2</a> <a href="2d.gradient.radial.touch3.html">2d.gradient.radial.touch3</a> <a href="2d.gradient.radial.cone.behind.html">2d.gradient.radial.cone.behind</a> <a href="2d.gradient.radial.cone.front.html">2d.gradient.radial.cone.front</a> <a href="2d.gradient.radial.cone.bottom.html">2d.gradient.radial.cone.bottom</a> <a href="2d.gradient.radial.cone.top.html">2d.gradient.radial.cone.top</a> <a href="2d.gradient.radial.cone.beside.html">2d.gradient.radial.cone.beside</a> <a href="2d.gradient.radial.cone.cylinder.html">2d.gradient.radial.cone.cylinder</a> <a href="2d.gradient.radial.cone.shape1.html">2d.gradient.radial.cone.shape1</a> <a href="2d.gradient.radial.cone.shape2.html">2d.gradient.radial.cone.shape2</a> </span>:

  </p><ol>
   <li>
    <p>If <span><var title="">x<sub>0</sub></var> = <var title="">x<sub>1</sub></var></span> and <span><var title="">y<sub>0</sub></var> = <var title="">y<sub>1</sub></var></span> and <span><var title="">r<sub>0</sub></var> = <var title="">r<sub>1</sub></var></span>, then the radial gradient must paint
     nothing<span class="testrefs kw-must" id="testrefs.2d.gradient.radial.equal"> <a href="#testrefs.2d.gradient.radial.equal" title="2d.gradient.radial.equal">#</a> <a href="2d.gradient.radial.equal.html">2d.gradient.radial.equal</a> </span>. Abort these steps.</p>
    <!-- XXX could make this
   paint the start color, or the end color, or a circle of one in
   the other, or raise an exception -->
    

   </li><li>
    <p>Let <span>x(<var title="">ω</var>) = (<var title="">x<sub>1</sub></var>-<var title="">x<sub>0</sub></var>)<var title="">ω</var> + <var title="">x<sub>0</sub></var></span></p>

    <p>Let <span>y(<var title="">ω</var>) = (<var title="">y<sub>1</sub></var>-<var title="">y<sub>0</sub></var>)<var title="">ω</var> + <var title="">y<sub>0</sub></var></span></p>

    <p>Let <span>r(<var title="">ω</var>) = (<var title="">r<sub>1</sub></var>-<var title="">r<sub>0</sub></var>)<var title="">ω</var> + <var title="">r<sub>0</sub></var></span></p>

    <p>Let the color at <var title="">ω</var> be the color at that
     position on the gradient (with the colors coming from the <a href="#interpolation">interpolation and extrapolation</a> described
     above).</p>

   </li><li>
    <p>For all values of <var title="">ω</var> where <span>r(<var title="">ω</var>) &gt; 0</span>, starting with the value
     of <var title="">ω</var> nearest to positive infinity and ending
     with the value of <var title="">ω</var> nearest to negative
     infinity, draw the circumference of the circle with radius <span>r(<var title="">ω</var>)</span> at position (<span>x(<var title="">ω</var>)</span>, <span>y(<var title="">ω</var>)</span>), with the color at <var title="">ω</var>, but only painting on the parts of the canvas
     that have not yet been painted on by earlier circles in this step for
     this rendering of the gradient.
  </p></li></ol>

  <p class="note">This effectively creates a cone, touched by the two circles
   defined in the creation of the gradient, with the part of the cone before
   the start circle (0.0) using the color of the first offset, the part of
   the cone after the end circle (1.0) using the color of the last offset,
   and areas outside the cone untouched by the gradient (transparent black).

  </p><p>Gradients must be painted only where the relevant stroking or filling
   effects requires that they be drawn.

  </p><p>The points in the radial gradient must be transformed as described by
   the <a href="#transformations0" title="dom-context-2d-transformation">current transformation matrix</a> when
   rendering<span class="testrefs kw-must" id="testrefs.2d.gradient.radial.transform"> <a href="#testrefs.2d.gradient.radial.transform" title="2d.gradient.radial.transform">#</a> <a href="2d.gradient.radial.transform.1.html">2d.gradient.radial.transform.1</a> <a href="2d.gradient.radial.transform.2.html">2d.gradient.radial.transform.2</a> <a href="2d.gradient.radial.transform.3.html">2d.gradient.radial.transform.3</a> </span>.</p>
  <!--
  <p>Support for actually painting gradients is optional. Instead of
  painting the gradients, user agents may instead just paint the first
  stop's color. However, <code
  title="dom-context-2d-createLinearGradient">createLinearGradient()</code>
  and <code
  title="dom-context-2d-createRadialGradient">createRadialGradient()</code>
  must always return objects when passed valid arguments.</p>
-->

  <p>Patterns are represented by objects implementing the opaque <dfn id="canvaspattern0"><code>CanvasPattern</code></dfn> interface.

  </p><p>To create objects of this type, the <dfn id="createpattern" title="dom-context-2d-createPattern"><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</code></dfn> method
   is used. The first argument gives the image to use as the pattern (either
   an <code><a href="#htmlimageelement">HTMLImageElement</a></code> or an
   <code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code>).
   Modifying this image after calling the <code title="dom-context-2d-createPattern"><a href="#createpattern">createPattern()</a></code> method must not affect
   the pattern<span class="testrefs kw-must" id="testrefs.2d.pattern.modify"> <a href="#testrefs.2d.pattern.modify" title="2d.pattern.modify">#</a> <a href="2d.pattern.modify.image1.html">2d.pattern.modify.image1</a> <a href="2d.pattern.modify.image2.html">2d.pattern.modify.image2</a> <a href="2d.pattern.modify.canvas1.html">2d.pattern.modify.canvas1</a> <a href="2d.pattern.modify.canvas2.html">2d.pattern.modify.canvas2</a> </span>. The second argument must be a string with one of the
   following values: <code title="">repeat</code>, <code title="">repeat-x</code>, <code title="">repeat-y</code>, <code title="">no-repeat</code>. If the empty string or null is specified, <code title="">repeat</code> must be assumed<span class="testrefs kw-must" id="testrefs.2d.pattern.missing"> <a href="#testrefs.2d.pattern.missing" title="2d.pattern.missing">#</a> <a href="2d.pattern.repeat.empty.html">2d.pattern.repeat.empty</a> <a href="2d.pattern.repeat.null.html">2d.pattern.repeat.null</a> </span>. If an unrecognized value is given,
   then the user agent must raise a <code>SYNTAX_ERR</code> exception<span class="testrefs kw-must" id="testrefs.2d.pattern.unrecognised"> <a href="#testrefs.2d.pattern.unrecognised" title="2d.pattern.unrecognised">#</a> <a href="2d.pattern.repeat.undefined.html">2d.pattern.repeat.undefined</a> <a href="2d.pattern.repeat.unrecognised.html">2d.pattern.repeat.unrecognised</a> </span>. User
   agents must recognize the four values described above exactly (e.g. they
   must not do case folding)<span class="testrefs kw-must" id="testrefs.2d.pattern.exact"> <a href="#testrefs.2d.pattern.exact" title="2d.pattern.exact">#</a> <a href="2d.pattern.repeat.case.html">2d.pattern.repeat.case</a> <a href="2d.pattern.repeat.nullsuffix.html">2d.pattern.repeat.nullsuffix</a> </span>. The method must return a <code><a href="#canvaspattern0">CanvasPattern</a></code> object suitably
   initialized<span class="testrefs kw-must" id="testrefs.2d.pattern.return"> <a href="#testrefs.2d.pattern.return" title="2d.pattern.return">#</a> <a href="2d.pattern.basic.type.html">2d.pattern.basic.type</a> </span>.

  </p><p>The <var title="">image</var> argument must be an instance of an
   <code><a href="#htmlimageelement">HTMLImageElement</a></code> or <code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code>. If the <var title="">image</var> is of the wrong type or null, the implementation must
   raise a <code>TYPE_MISMATCH_ERR</code> exception<span class="testrefs kw-must" id="testrefs.2d.pattern.wrongtype"> <a href="#testrefs.2d.pattern.wrongtype" title="2d.pattern.wrongtype">#</a> <a href="2d.pattern.image.undefined.html">2d.pattern.image.undefined</a> <a href="2d.pattern.image.null.html">2d.pattern.image.null</a> <a href="2d.pattern.image.string.html">2d.pattern.image.string</a> </span>.</p>
  <!-- drawImage() has an equivalent paragraph -->

  <p>If the <var title="">image</var> argument is an <code><a href="#htmlimageelement">HTMLImageElement</a></code> object whose <code title="dom-img-complete"><a href="#complete">complete</a></code> attribute
   is false, then the implementation must raise an
   <code>INVALID_STATE_ERR</code> exception<span class="testrefs kw-must" id="testrefs.2d.pattern.incomplete"> <a href="#testrefs.2d.pattern.incomplete" title="2d.pattern.incomplete">#</a> <a href="2d.pattern.image.incomplete.html">2d.pattern.image.incomplete</a> <a href="2d.pattern.image.broken.html">2d.pattern.image.broken</a> </span>.</p>
  <!-- drawImage() has an equivalent paragraph -->

  <p>If the <var title="">image</var> argument is an <code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code> object with either
   a horizontal dimension or a vertical dimension equal to zero, then the
   implementation must raise an <code>INVALID_STATE_ERR</code> exception<span class="testrefs kw-must" id="testrefs.2d.pattern.zerocanvas"> <a href="#testrefs.2d.pattern.zerocanvas" title="2d.pattern.zerocanvas">#</a> <a href="2d.pattern.basic.zerocanvas.html">2d.pattern.basic.zerocanvas</a> </span>.</p>
  <!-- drawImage() has an equivalent paragraph -->

  <p>Patterns must be painted so that the top left of the first image is
   anchored at the origin of the coordinate space, and images are then
   repeated horizontally to the left and right (if the <code>repeat-x</code>
   string was specified) or vertically up and down (if the
   <code>repeat-y</code> string was specified) or in all four directions all
   over the canvas (if the <code>repeat</code> string was specified)<span class="testrefs kw-must" id="testrefs.2d.pattern.painting"> <a href="#testrefs.2d.pattern.painting" title="2d.pattern.painting">#</a> <a href="2d.pattern.basic.image.html">2d.pattern.basic.image</a> <a href="2d.pattern.basic.canvas.html">2d.pattern.basic.canvas</a> <a href="2d.pattern.basic.nocontext.html">2d.pattern.basic.nocontext</a> <a href="2d.pattern.paint.norepeat.basic.html">2d.pattern.paint.norepeat.basic</a> <a href="2d.pattern.paint.norepeat.outside.html">2d.pattern.paint.norepeat.outside</a> <a href="2d.pattern.paint.norepeat.coord1.html">2d.pattern.paint.norepeat.coord1</a> <a href="2d.pattern.paint.norepeat.coord2.html">2d.pattern.paint.norepeat.coord2</a> <a href="2d.pattern.paint.norepeat.coord3.html">2d.pattern.paint.norepeat.coord3</a> <a href="2d.pattern.paint.repeat.basic.html">2d.pattern.paint.repeat.basic</a> <a href="2d.pattern.paint.repeat.outside.html">2d.pattern.paint.repeat.outside</a> <a href="2d.pattern.paint.repeat.coord1.html">2d.pattern.paint.repeat.coord1</a> <a href="2d.pattern.paint.repeat.coord2.html">2d.pattern.paint.repeat.coord2</a> <a href="2d.pattern.paint.repeat.coord3.html">2d.pattern.paint.repeat.coord3</a> <a href="2d.pattern.paint.repeatx.basic.html">2d.pattern.paint.repeatx.basic</a> <a href="2d.pattern.paint.repeatx.outside.html">2d.pattern.paint.repeatx.outside</a> <a href="2d.pattern.paint.repeatx.coord1.html">2d.pattern.paint.repeatx.coord1</a> <a href="2d.pattern.paint.repeaty.basic.html">2d.pattern.paint.repeaty.basic</a> <a href="2d.pattern.paint.repeaty.outside.html">2d.pattern.paint.repeaty.outside</a> <a href="2d.pattern.paint.repeaty.coord1.html">2d.pattern.paint.repeaty.coord1</a> <a href="2d.pattern.paint.orientation.image.html">2d.pattern.paint.orientation.image</a> <a href="2d.pattern.paint.orientation.canvas.html">2d.pattern.paint.orientation.canvas</a> </span>. The
   images are not scaled by this process; one CSS pixel of the image must be
   painted on one coordinate space unit<span class="testrefs kw-must" id="testrefs.2d.pattern.unscaled"> <a href="#testrefs.2d.pattern.unscaled" title="2d.pattern.unscaled">#</a> </span>. Of course, patterns must actually be
   painted only where the stroking or filling effect requires that they be
   drawn<span class="testrefs kw-must" id="testrefs.2d.pattern.extent"> <a href="#testrefs.2d.pattern.extent" title="2d.pattern.extent">#</a> </span>, and are affected by the current transformation matrix.

  </p><p>When the <code title="dom-context-2d-createPattern"><a href="#createpattern">createPattern()</a></code> method is passed, as its
   <var title="">image</var> argument, an animated image, the poster frame of
   the animation, or the first frame of the animation if there is no poster
   frame, must be used<span class="testrefs kw-must" id="testrefs.2d.pattern.animated"> <a href="#testrefs.2d.pattern.animated" title="2d.pattern.animated">#</a> <a href="2d.pattern.animated.gif.html">2d.pattern.animated.gif</a> </span>.</p>
  <!-- drawImage() has an equivalent paragraph -->

  <p>Support for patterns is optional. If the user agent doesn't support
   patterns, then <code title="dom-context-2d-createPattern"><a href="#createpattern">createPattern()</a></code> must return null<span class="testrefs kw-must" id="testrefs.2d.pattern.unsupported"> <a href="#testrefs.2d.pattern.unsupported" title="2d.pattern.unsupported">#</a> </span>.</p>
  <!--
   XXXv4 Requests for v4 features:
    * apply transforms to patterns, so you don't have to create
      transformed patterns manually by rendering them to an off-screen
      canvas then using that canvas as the pattern.
  -->

  <h6 id="line-styles"><span class="secno">4.7.11.1.5. </span>Line styles</h6>

  <p>The <dfn id="linewidth" title="dom-context-2d-lineWidth"><code>lineWidth</code></dfn> attribute
   gives the width of lines, in coordinate space units<span class="testrefs kw-none" id="testrefs.2d.lineWidth"> <a href="#testrefs.2d.lineWidth" title="2d.lineWidth">#</a> <a href="2d.line.width.basic.html">2d.line.width.basic</a> <a href="2d.line.width.transformed.html">2d.line.width.transformed</a> </span>. On setting, zero,
   negative, infinite, and NaN values must be ignored, leaving the value
   unchanged<span class="testrefs kw-must" id="testrefs.2d.lineWidth.invalid"> <a href="#testrefs.2d.lineWidth.invalid" title="2d.lineWidth.invalid">#</a> <a href="2d.line.width.invalid.html">2d.line.width.invalid</a> </span>.

  </p><p>When the context is created, the <code title="dom-context-2d-lineWidth"><a href="#linewidth">lineWidth</a></code> attribute must initially have the
   value <code>1.0</code><span class="testrefs kw-must" id="testrefs.2d.lineWidth.default"> <a href="#testrefs.2d.lineWidth.default" title="2d.lineWidth.default">#</a> <a href="2d.line.defaults.html">2d.line.defaults</a> </span>.

  </p><p>The <dfn id="linecap" title="dom-context-2d-lineCap"><code>lineCap</code></dfn> attribute defines
   the type of endings that UAs will place on the end of lines<span class="testrefs kw-none" id="testrefs.2d.lineCap.end"> <a href="#testrefs.2d.lineCap.end" title="2d.lineCap.end">#</a> <a href="2d.line.cap.open.html">2d.line.cap.open</a> <a href="2d.line.cap.closed.html">2d.line.cap.closed</a> </span>. The three
   valid values are <code>butt</code>, <code>round</code>, and
   <code>square</code>. The <code>butt</code> value means that the end of
   each line has a flat edge perpendicular to the direction of the line (and
   that no additional line cap is added)<span class="testrefs kw-none" id="testrefs.2d.lineCap.butt"> <a href="#testrefs.2d.lineCap.butt" title="2d.lineCap.butt">#</a> <a href="2d.line.cap.butt.html">2d.line.cap.butt</a> </span>. The <code>round</code> value means
   that a semi-circle with the diameter equal to the width of the line must
   then be added on to the end of the line<span class="testrefs kw-must" id="testrefs.2d.lineCap.round"> <a href="#testrefs.2d.lineCap.round" title="2d.lineCap.round">#</a> <a href="2d.line.cap.round.html">2d.line.cap.round</a> </span>. The <code>square</code> value
   means that a rectangle with the length of the line width and the width of
   half the line width, placed flat against the edge perpendicular to the
   direction of the line, must be added at the end of each line<span class="testrefs kw-must" id="testrefs.2d.lineCap.square"> <a href="#testrefs.2d.lineCap.square" title="2d.lineCap.square">#</a> <a href="2d.line.cap.square.html">2d.line.cap.square</a> </span>. On setting,
   any other value than the literal strings <code>butt</code>,
   <code>round</code>, and <code>square</code> must be ignored, leaving the
   value unchanged<span class="testrefs kw-must" id="testrefs.2d.lineCap.invalid"> <a href="#testrefs.2d.lineCap.invalid" title="2d.lineCap.invalid">#</a> <a href="2d.line.cap.invalid.html">2d.line.cap.invalid</a> </span>.

  </p><p>When the context is created, the <code title="dom-context-2d-lineCap"><a href="#linecap">lineCap</a></code> attribute must initially have the value
   <code>butt</code><span class="testrefs kw-must" id="testrefs.2d.lineCap.default"> <a href="#testrefs.2d.lineCap.default" title="2d.lineCap.default">#</a> <a href="2d.line.defaults.html">2d.line.defaults</a> </span>.

  </p><p>The <dfn id="linejoin" title="dom-context-2d-lineJoin"><code>lineJoin</code></dfn> attribute
   defines the type of corners that UAs will place where two lines meet. The
   three valid values are <code>bevel</code>, <code>round</code>, and
   <code>miter</code>.

  </p><p>On setting, any other value than the literal strings <code>bevel</code>,
   <code>round</code>, and <code>miter</code> must be ignored, leaving the
   value unchanged<span class="testrefs kw-must" id="testrefs.2d.lineJoin.invalid"> <a href="#testrefs.2d.lineJoin.invalid" title="2d.lineJoin.invalid">#</a> <a href="2d.line.join.invalid.html">2d.line.join.invalid</a> </span>.

  </p><p>When the context is created, the <code title="dom-context-2d-lineJoin"><a href="#linejoin">lineJoin</a></code> attribute must initially have the
   value <code>miter</code><span class="testrefs kw-must" id="testrefs.2d.lineJoin.default"> <a href="#testrefs.2d.lineJoin.default" title="2d.lineJoin.default">#</a> <a href="2d.line.defaults.html">2d.line.defaults</a> </span>.

  </p><p>A join exists at any point in a subpath shared by two consecutive lines<span class="testrefs kw-none" id="testrefs.2d.lineJoin.joins"> <a href="#testrefs.2d.lineJoin.joins" title="2d.lineJoin.joins">#</a> <a href="2d.line.join.open.html">2d.line.join.open</a> <a href="2d.line.join.parallel.html">2d.line.join.parallel</a> </span>.
   When a subpath is closed, then a join also exists at its first point
   (equivalent to its last point) connecting the first and last lines in the
   subpath<span class="testrefs kw-none" id="testrefs.2d.lineJoin.joinclosed"> <a href="#testrefs.2d.lineJoin.joinclosed" title="2d.lineJoin.joinclosed">#</a> <a href="2d.line.join.closed.html">2d.line.join.closed</a> </span>.

  </p><p>In addition to the point where the join occurs, two additional points
   are relevant to each join, one for each line: the two corners found half
   the line width away from the join point, one perpendicular to each line,
   each on the side furthest from the other line.

  </p><p>A filled triangle connecting these two opposite corners with a straight
   line, with the third point of the triangle being the join point, must be
   rendered at all joins<span class="testrefs kw-must" id="testrefs.2d.lineJoin.common"> <a href="#testrefs.2d.lineJoin.common" title="2d.lineJoin.common">#</a> <a href="2d.line.join.bevel.html">2d.line.join.bevel</a> </span>. The <code title="dom-context-2d-lineJoin"><a href="#linejoin">lineJoin</a></code> attribute controls whether anything
   else is rendered. The three aforementioned values have the following
   meanings:

  </p><p>The <code>bevel</code> value means that this is all that is rendered at
   joins<span class="testrefs kw-none" id="testrefs.2d.lineJoin.bevel"> <a href="#testrefs.2d.lineJoin.bevel" title="2d.lineJoin.bevel">#</a> <a href="2d.line.join.bevel.html">2d.line.join.bevel</a> </span>.

  </p><p>The <code>round</code> value means that a filled arc connecting the two
   aforementioned corners of the join, abutting (and not overlapping) the
   aforementioned triangle, with the diameter equal to the line width and the
   origin at the point of the join, must be rendered at joins<span class="testrefs kw-must" id="testrefs.2d.lineJoin.round"> <a href="#testrefs.2d.lineJoin.round" title="2d.lineJoin.round">#</a> <a href="2d.line.join.round.html">2d.line.join.round</a> </span>.

  </p><p>The <code>miter</code> value means that a second filled triangle must
   (if it can given the miter length) be rendered at the join, with one line
   being the line between the two aforementioned corners, abutting the first
   triangle, and the other two being continuations of the outside edges of
   the two joining lines, as long as required to intersect without going over
   the miter length<span class="testrefs kw-must" id="testrefs.2d.lineJoin.miter"> <a href="#testrefs.2d.lineJoin.miter" title="2d.lineJoin.miter">#</a> <a href="2d.line.join.miter.html">2d.line.join.miter</a> <a href="2d.line.miter.exceeded.html">2d.line.miter.exceeded</a> <a href="2d.line.miter.acute.html">2d.line.miter.acute</a> <a href="2d.line.miter.obtuse.html">2d.line.miter.obtuse</a> <a href="2d.line.miter.rightangle.html">2d.line.miter.rightangle</a> <a href="2d.line.miter.lineedge.html">2d.line.miter.lineedge</a> <a href="2d.line.miter.within.html">2d.line.miter.within</a> </span>.

  </p><p>The miter length is the distance from the point where the lines touch on
   the inside of the join to the intersection of the line edges on the
   outside of the join. The miter limit ratio is the maximum allowed ratio of
   the miter length to half the line width. If the miter length would cause
   the miter limit ratio to be exceeded, this second triangle must not be
   rendered<span class="testrefs kw-must" id="testrefs.2d.lineJoin.miterLimit"> <a href="#testrefs.2d.lineJoin.miterLimit" title="2d.lineJoin.miterLimit">#</a> <a href="2d.line.miter.exceeded.html">2d.line.miter.exceeded</a> <a href="2d.line.miter.acute.html">2d.line.miter.acute</a> <a href="2d.line.miter.obtuse.html">2d.line.miter.obtuse</a> </span>.

  </p><p>The miter limit ratio can be explicitly set using the <dfn id="miterlimit" title="dom-context-2d-miterLimit"><code>miterLimit</code></dfn> attribute.
   On setting, zero, negative, infinite, and NaN values must be ignored,
   leaving the value unchanged<span class="testrefs kw-must" id="testrefs.2d.miterLimit.invalid"> <a href="#testrefs.2d.miterLimit.invalid" title="2d.miterLimit.invalid">#</a> <a href="2d.line.miter.invalid.html">2d.line.miter.invalid</a> </span>.

  </p><p>When the context is created, the <code title="dom-context-2d-miterLimit"><a href="#miterlimit">miterLimit</a></code> attribute must initially have the
   value <code>10.0</code><span class="testrefs kw-must" id="testrefs.2d.miterLimit.default"> <a href="#testrefs.2d.miterLimit.default" title="2d.miterLimit.default">#</a> <a href="2d.line.defaults.html">2d.line.defaults</a> </span>.</p>
  <!-- XXX this section doesn't say what these attributes return or
  what they do on setting. not a big deal; it's pretty obvious. but if
  anyone complains, we'll have to add it -->
  <!--
XXXv4 dashed lines have been requested.  Philip Taylor provides these
notes on what would need to be defined for dashed lines:
> I don't think it's entirely trivial to add, to the detail that's
> necessary in a specification. The common graphics APIs (at least
> Cairo, Quartz and java.awt.Graphics, and any SVG implementation) all
> have dashes specified by passing an array of dash lengths (alternating
> on/off), so that should be alright as long as you define what units
> it's measured in and what happens when you specify an odd number of
> values and how errors are handled and what happens if you update the
> array later. But after that, what does it do when stroking multiple
> subpaths, in terms of offsetting the dashes? When you use strokeRect,
> where is offset 0? Does moveTo reset the offset? How does it interact
> with lineCap/lineJoin? All the potential issues need test cases too,
> and the implementations need to make sure they handle any edge cases
> that the underlying graphics library does differently. (SVG Tiny 1.2
> appears to skip some of the problems by leaving things undefined and
> allowing whatever behavior the graphics library has.)
  -->

  <h6 id="shadows"><span class="secno">4.7.11.1.6. </span><dfn id="shadows0">Shadows</dfn></h6>

  <p>All drawing operations are affected by the four global shadow
   attributes.

  </p><p>The <dfn id="shadowcolor" title="dom-context-2d-shadowColor"><code>shadowColor</code></dfn> attribute
   sets the color of the shadow.

  </p><p>When the context is created, the <code title="dom-context-2d-shadowColor"><a href="#shadowcolor">shadowColor</a></code> attribute initially must be
   fully-transparent black.

  </p><p>On getting, the <a href="#serialization" title="serialization of a    color">serialization of the color</a> must be returned.

  </p><p>On setting, the new value must be parsed as a CSS &lt;color&gt; value
   and the color assigned. If the value is not a valid color, then it must be
   ignored, and the attribute must retain its previous value. <a href="#refsCSS3COLOR">[CSS3COLOR]</a>

  </p><p>The <dfn id="shadowoffsetx" title="dom-context-2d-shadowOffsetX"><code>shadowOffsetX</code></dfn> and
   <dfn id="shadowoffsety" title="dom-context-2d-shadowOffsetY"><code>shadowOffsetY</code></dfn>
   attributes specify the distance that the shadow will be offset in the
   positive horizontal and positive vertical distance respectively. Their
   values are in coordinate space units. They are not affected by the current
   transformation matrix.

  </p><p>When the context is created, the shadow offset attributes must initially
   have the value <code>0</code>.

  </p><p>On getting, they must return their current value. On setting, the
   attribute being set must be set to the new value, except if the value is
   infinite or NaN, in which case the new value must be ignored.

  </p><p>The <dfn id="shadowblur" title="dom-context-2d-shadowBlur"><code>shadowBlur</code></dfn> attribute
   specifies the size of the blurring effect. (The units do not map to
   coordinate space units, and are not affected by the current transformation
   matrix.)

  </p><p>When the context is created, the <code title="dom-context-2d-shadowBlur"><a href="#shadowblur">shadowBlur</a></code> attribute must initially have the
   value <code>0</code>.

  </p><p>On getting, the attribute must return its current value. On setting the
   attribute must be set to the new value, except if the value is negative,
   infinite or NaN, in which case the new value must be ignored.

  </p><p>When shadows are drawn, they must be rendered as follows:

  </p><ol>
   <li>
    <p>Let <var title="">A</var> be the source image for which a shadow is
     being created.</p>

   </li><li>
    <p>Let <var title="">B</var> be an infinite transparent black bitmap,
     with a coordinate space and an origin identical to <var title="">A</var>.</p>

   </li><li>
    <p>Copy the alpha channel of <var title="">A</var> to <var title="">B</var>, offset by <code title="dom-context-2d-shadowOffsetX"><a href="#shadowoffsetx">shadowOffsetX</a></code> in the positive <var title="">x</var> direction, and <code title="dom-context-2d-shadowOffsetY"><a href="#shadowoffsety">shadowOffsetY</a></code> in the positive <var title="">y</var> direction.</p>

   </li><li>
    <p>If <code title="dom-context-2d-shadowBlur"><a href="#shadowblur">shadowBlur</a></code> is greater than 0:</p>

    <ol>
     <li>
      <p>If <code title="dom-context-2d-shadowBlur"><a href="#shadowblur">shadowBlur</a></code> is less than 8, let <var title="">σ</var> be half the value of <code title="dom-context-2d-shadowBlur"><a href="#shadowblur">shadowBlur</a></code>; otherwise, let <var title="">σ</var> be the square root of multiplying the value of
       <code title="dom-context-2d-shadowBlur"><a href="#shadowblur">shadowBlur</a></code> by 2.

     </p></li><li>
      <p>Perform a 2D Gaussian Blur on <var title="">B</var>, using <var title="">σ</var> as the standard deviation.
     </p></li>
     <!-- need a reference for this XXX -->
    </ol>

    <p>User agents may limit values of <var title="">σ</var> to an
     implementation-specific maximum value to avoid exceeding hardware
     limitations during the Gaussian blur operation.</p>

   </li><li>
    <p>Set the red, green, and blue components of every pixel in <var title="">B</var> to the red, green, and blue components (respectively)
     of the color of <code title="dom-context-2d-shadowColor"><a href="#shadowcolor">shadowColor</a></code>.</p>

   </li><li>
    <p>Multiply the alpha component of every pixel in <var title="">B</var>
     by the alpha component of the color of <code title="dom-context-2d-shadowColor"><a href="#shadowcolor">shadowColor</a></code>.</p>

   </li><li>
    <p>The shadow is in the bitmap <var title="">B</var>, and is rendered as
     part of the drawing model described below.</p>
  </li></ol>

  <h6 id="simple"><span class="secno">4.7.11.1.7. </span>Simple shapes
   (rectangles)</h6>

  <p>There are three methods that immediately draw rectangles to the bitmap.
   They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top left of
   the rectangle, and the second two give the width <var title="">w</var> and
   height <var title="">h</var> of the rectangle, respectively.

  </p><p>The <a href="#transformations0" title="dom-context-2d-transformation">current transformation matrix</a> must
   be applied to the following four coordinates, which form the path that
   must then be closed to get the specified rectangle: <span>(<var title="">x</var>, <var title="">y</var>)</span>, <span>(<span><var title="">x</var>+<var title="">w</var></span>, <var title="">y</var>)</span>, <span>(<span><var title="">x</var>+<var title="">w</var></span>, <span><var title="">y</var>+<var title="">h</var></span>)</span>, <span>(<var title="">x</var>, <span><var title="">y</var>+<var title="">h</var></span>)</span>.

  </p><p>Shapes are painted without affecting the current path, and are subject
   to the <a href="#clipping" title="clipping region">clipping region</a>,
   and, with the exception of <code title="dom-context-2d-clearRect"><a href="#clearrect">clearRect()</a></code>, also <a href="#shadows0" title="shadows">shadow effects</a>, <a href="#globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, and <a href="#globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
   operators</a>.

  </p><p>The <dfn id="clearrect" title="dom-context-2d-clearRect"><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must clear the pixels in the
   specified rectangle that also intersect the current clipping region to a
   fully transparent black, erasing any previous image<span class="testrefs kw-must" id="testrefs.2d.clearRect"> <a href="#testrefs.2d.clearRect" title="2d.clearRect">#</a> <a href="2d.clearRect.basic.html">2d.clearRect.basic</a> <a href="2d.clearRect.path.html">2d.clearRect.path</a> <a href="2d.clearRect.zero.html">2d.clearRect.zero</a> <a href="2d.clearRect.negative.html">2d.clearRect.negative</a> <a href="2d.clearRect.transform.html">2d.clearRect.transform</a> <a href="2d.clearRect.globalalpha.html">2d.clearRect.globalalpha</a> <a href="2d.clearRect.globalcomposite.html">2d.clearRect.globalcomposite</a> <a href="2d.clearRect.clip.html">2d.clearRect.clip</a> <a href="2d.clearRect.shadow.html">2d.clearRect.shadow</a> </span>. If either height or
   width are zero, this method has no effect.

  </p><p>The <dfn id="fillrect" title="dom-context-2d-fillRect"><code>fillRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must paint the specified rectangular
   area using the <code title="dom-context-2d-fillStyle"><a href="#fillstyle">fillStyle</a></code><span class="testrefs kw-must" id="testrefs.2d.fillRect"> <a href="#testrefs.2d.fillRect" title="2d.fillRect">#</a> <a href="2d.fillRect.basic.html">2d.fillRect.basic</a> <a href="2d.fillRect.path.html">2d.fillRect.path</a> <a href="2d.fillRect.zero.html">2d.fillRect.zero</a> <a href="2d.fillRect.negative.html">2d.fillRect.negative</a> <a href="2d.fillRect.transform.html">2d.fillRect.transform</a> <a href="2d.fillRect.clip.html">2d.fillRect.clip</a> <a href="2d.fillRect.shadow.html">2d.fillRect.shadow</a> </span>. If either height or width are
   zero, this method has no effect.

  </p><p>The <dfn id="strokerect" title="dom-context-2d-strokeRect"><code>strokeRect(<var title="">x</var>,
   <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
   rectangle's path using the <code title="dom-context-2d-strokeStyle"><a href="#strokestyle">strokeStyle</a></code>, <code title="dom-context-2d-lineWidth"><a href="#linewidth">lineWidth</a></code>,
   <code title="dom-context-2d-lineJoin"><a href="#linejoin">lineJoin</a></code>, and (if appropriate) <code title="dom-context-2d-miterLimit"><a href="#miterlimit">miterLimit</a></code> attributes<span class="testrefs kw-must" id="testrefs.2d.strokeRect"> <a href="#testrefs.2d.strokeRect" title="2d.strokeRect">#</a> <a href="2d.strokeRect.basic.html">2d.strokeRect.basic</a> <a href="2d.strokeRect.path.html">2d.strokeRect.path</a> <a href="2d.strokeRect.zero.1.html">2d.strokeRect.zero.1</a> <a href="2d.strokeRect.zero.2.html">2d.strokeRect.zero.2</a> <a href="2d.strokeRect.zero.3.html">2d.strokeRect.zero.3</a> <a href="2d.strokeRect.zero.4.html">2d.strokeRect.zero.4</a> <a href="2d.strokeRect.zero.5.html">2d.strokeRect.zero.5</a> <a href="2d.strokeRect.negative.html">2d.strokeRect.negative</a> <a href="2d.strokeRect.transform.html">2d.strokeRect.transform</a> <a href="2d.strokeRect.globalalpha.html">2d.strokeRect.globalalpha</a> <a href="2d.strokeRect.globalcomposite.html">2d.strokeRect.globalcomposite</a> <a href="2d.strokeRect.clip.html">2d.strokeRect.clip</a> <a href="2d.strokeRect.shadow.html">2d.strokeRect.shadow</a> </span>. If both height and
   width are zero, this method has no effect, since there is no path to
   stroke (it's a point). If only one of the two is zero, then the method
   will draw a line instead (the path for the outline is just a straight line
   along the non-zero dimension).

  </p><h6 id="complex"><span class="secno">4.7.11.1.8. </span>Complex shapes (paths)</h6>

  <p>The context always has a current path. There is only one current path,
   it is not part of the <span title="dom-context-2d-">drawing state</span>.

  </p><p>A <dfn id="path">path</dfn> has a list of zero or more subpaths. Each
   subpath consists of a list of one or more points, connected by straight or
   curved lines, and a flag indicating whether the subpath is closed or not.
   A closed subpath is one where the last point of the subpath is connected
   to the first point of the subpath by a straight line. Subpaths with fewer
   than two points are ignored when painting the path.

  </p><p>Initially, the context's path must have zero subpaths<span class="testrefs kw-must" id="testrefs.2d.path.initial"> <a href="#testrefs.2d.path.initial" title="2d.path.initial">#</a> <a href="2d.path.initial.html">2d.path.initial</a> </span>.

  </p><p>The points and lines added to the path by these methods must be
   transformed according to the <a href="#transformations0" title="dom-context-2d-transformation">current transformation matrix</a> as
   they are added<span class="testrefs kw-must" id="testrefs.2d.path.transformation"> <a href="#testrefs.2d.path.transformation" title="2d.path.transformation">#</a> <a href="2d.path.arc.scale.1.html">2d.path.arc.scale.1</a> <a href="2d.path.stroke.scale1.html">2d.path.stroke.scale1</a> <a href="2d.path.stroke.scale2.html">2d.path.stroke.scale2</a> <a href="2d.path.stroke.skew.html">2d.path.stroke.skew</a> <a href="2d.path.transformation.basic.html">2d.path.transformation.basic</a> <a href="2d.path.transformation.multiple.html">2d.path.transformation.multiple</a> <a href="2d.path.transformation.changing.html">2d.path.transformation.changing</a> </span>.

  </p><p>The <dfn id="beginpath" title="dom-context-2d-beginPath"><code>beginPath()</code></dfn> method must
   empty the list of subpaths so that the context once again has zero
   subpaths<span class="testrefs kw-must" id="testrefs.2d.path.beginPath"> <a href="#testrefs.2d.path.beginPath" title="2d.path.beginPath">#</a> <a href="2d.path.beginPath.html">2d.path.beginPath</a> </span>.

  </p><p>The <dfn id="moveto" title="dom-context-2d-moveTo"><code>moveTo(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must create a
   new subpath with the specified point as its first (and only) point<span class="testrefs kw-must" id="testrefs.2d.path.moveTo"> <a href="#testrefs.2d.path.moveTo" title="2d.path.moveTo">#</a> <a href="2d.path.moveTo.basic.html">2d.path.moveTo.basic</a> <a href="2d.path.moveTo.newsubpath.html">2d.path.moveTo.newsubpath</a> <a href="2d.path.moveTo.multiple.html">2d.path.moveTo.multiple</a> </span>.

  </p><p>The <dfn id="closepath" title="dom-context-2d-closePath"><code>closePath()</code></dfn> method must
   do nothing if the context has no subpaths<span class="testrefs kw-must" id="testrefs.2d.path.closePath.empty"> <a href="#testrefs.2d.path.closePath.empty" title="2d.path.closePath.empty">#</a> <a href="2d.path.closePath.empty.html">2d.path.closePath.empty</a> </span>. Otherwise, it must mark the
   last subpath as closed, create a new subpath whose first point is the same
   as the previous subpath's first point, and finally add this new subpath to
   the path<span class="testrefs kw-must" id="testrefs.2d.path.closePath.nonempty"> <a href="#testrefs.2d.path.closePath.nonempty" title="2d.path.closePath.nonempty">#</a> <a href="2d.path.closePath.newline.html">2d.path.closePath.newline</a> <a href="2d.path.closePath.nextpoint.html">2d.path.closePath.nextpoint</a> </span>. (If the last subpath had more than one point in its list of
   points, then this is equivalent to adding a straight line connecting the
   last point back to the first point, thus &quot;closing&quot; the shape, and then
   repeating the last <code title="dom-context-2d-moveTo"><a href="#moveto">moveTo()</a></code> call.)

  </p><p>New points and the lines connecting them are added to subpaths using the
   methods described below. In all cases, the methods only modify the last
   subpath in the context's paths.

  </p><p>The <dfn id="lineto" title="dom-context-2d-lineTo"><code>lineTo(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must do
   nothing if the context has no subpaths<span class="testrefs kw-must" id="testrefs.2d.path.lineTo.empty"> <a href="#testrefs.2d.path.lineTo.empty" title="2d.path.lineTo.empty">#</a> <a href="2d.path.lineTo.emptysubpath.html">2d.path.lineTo.emptysubpath</a> </span>. Otherwise, it must connect the
   last point in the subpath to the given point (<var title="">x</var>, <var title="">y</var>) using a straight line, and must then add the given point
   (<var title="">x</var>, <var title="">y</var>) to the subpath<span class="testrefs kw-must" id="testrefs.2d.path.lineTo.nonempty"> <a href="#testrefs.2d.path.lineTo.nonempty" title="2d.path.lineTo.nonempty">#</a> <a href="2d.path.lineTo.basic.html">2d.path.lineTo.basic</a> <a href="2d.path.lineTo.nextpoint.html">2d.path.lineTo.nextpoint</a> </span>.

  </p><p>The <dfn id="quadraticcurveto" title="dom-context-2d-quadraticCurveTo"><code>quadraticCurveTo(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>, <var title="">y</var>)</code></dfn> method must do nothing if the context has
   no subpaths<span class="testrefs kw-must" id="testrefs.2d.path.quadratic.empty"> <a href="#testrefs.2d.path.quadratic.empty" title="2d.path.quadratic.empty">#</a> <a href="2d.path.quadraticCurveTo.emptysubpath.html">2d.path.quadraticCurveTo.emptysubpath</a> </span>. Otherwise it must connect the last point in the subpath to
   the given point (<var title="">x</var>, <var title="">y</var>) using a
   quadratic Bézier curve with control point (<var title="">cpx</var>,
   <var title="">cpy</var>), and must then add the given point (<var title="">x</var>, <var title="">y</var>) to the subpath<span class="testrefs kw-must" id="testrefs.2d.path.quadratic.nonempty"> <a href="#testrefs.2d.path.quadratic.nonempty" title="2d.path.quadratic.nonempty">#</a> <a href="2d.path.quadraticCurveTo.basic.html">2d.path.quadraticCurveTo.basic</a> <a href="2d.path.quadraticCurveTo.shape.html">2d.path.quadraticCurveTo.shape</a> <a href="2d.path.quadraticCurveTo.scaled.html">2d.path.quadraticCurveTo.scaled</a> </span>. <a href="#refsBEZIER">[BEZIER]</a></p>
  <!-- XXX [BEZIER] Paul de Casteljau, Courbes &agrave; p&ocirc;les, INPI, 1959 -->

  <p>The <dfn id="beziercurveto" title="dom-context-2d-bezierCurveTo"><code>bezierCurveTo(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>,
   <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</code></dfn> method must do nothing if the context has
   no subpaths<span class="testrefs kw-must" id="testrefs.2d.path.bezier.empty"> <a href="#testrefs.2d.path.bezier.empty" title="2d.path.bezier.empty">#</a> <a href="2d.path.bezierCurveTo.emptysubpath.html">2d.path.bezierCurveTo.emptysubpath</a> </span>. Otherwise, it must connect the last point in the subpath to
   the given point (<var title="">x</var>, <var title="">y</var>) using a
   cubic Bézier curve with control points (<var title="">cp1x</var>,
   <var title="">cp1y</var>) and (<var title="">cp2x</var>, <var title="">cp2y</var>). Then, it must add the point (<var title="">x</var>,
   <var title="">y</var>) to the subpath<span class="testrefs kw-must" id="testrefs.2d.path.bezier.nonempty"> <a href="#testrefs.2d.path.bezier.nonempty" title="2d.path.bezier.nonempty">#</a> <a href="2d.path.bezierCurveTo.basic.html">2d.path.bezierCurveTo.basic</a> <a href="2d.path.bezierCurveTo.shape.html">2d.path.bezierCurveTo.shape</a> <a href="2d.path.bezierCurveTo.scaled.html">2d.path.bezierCurveTo.scaled</a> </span>. <a href="#refsBEZIER">[BEZIER]</a></p>
  <!-- XXX [BEZIER] Paul de Casteljau, Courbes &agrave; p&ocirc;les, INPI, 1959 -->

  <p>The <dfn id="arcto" title="dom-context-2d-arcTo"><code>arcTo(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</code></dfn> method must do
   nothing if the context has no subpaths<span class="testrefs kw-must" id="testrefs.2d.path.arcTo.empty"> <a href="#testrefs.2d.path.arcTo.empty" title="2d.path.arcTo.empty">#</a> <a href="2d.path.arcTo.emptysubpath.html">2d.path.arcTo.emptysubpath</a> </span>. If the context <em>does</em> have
   a subpath, then the behavior depends on the arguments and the last point
   in the subpath.

  </p><p>Negative values for <var title="">radius</var> must cause the
   implementation to raise an <code>INDEX_SIZE_ERR</code> exception<span class="testrefs kw-must" id="testrefs.2d.path.arcTo.negative"> <a href="#testrefs.2d.path.arcTo.negative" title="2d.path.arcTo.negative">#</a> <a href="2d.path.arcTo.negative.html">2d.path.arcTo.negative</a> </span>.

  </p><p>Let the point (<var title="">x0</var>, <var title="">y0</var>) be the
   last point in the subpath.

  </p><p>If the point (<var title="">x0</var>, <var title="">y0</var>) is equal
   to the point (<var title="">x1</var>, <var title="">y1</var>)<span class="testrefs kw-must" id="testrefs.2d.path.arcTo.coincide.01"> <a href="#testrefs.2d.path.arcTo.coincide.01" title="2d.path.arcTo.coincide.01">#</a> <a href="2d.path.arcTo.coincide.1.html">2d.path.arcTo.coincide.1</a> </span>, or if the
   point (<var title="">x1</var>, <var title="">y1</var>) is equal to the
   point (<var title="">x2</var>, <var title="">y2</var>)<span class="testrefs kw-must" id="testrefs.2d.path.arcTo.coincide.12"> <a href="#testrefs.2d.path.arcTo.coincide.12" title="2d.path.arcTo.coincide.12">#</a> <a href="2d.path.arcTo.coincide.2.html">2d.path.arcTo.coincide.2</a> </span>, or if the radius
   <var title="">radius</var> is zero<span class="testrefs kw-must" id="testrefs.2d.path.arcTo.zeroradius"> <a href="#testrefs.2d.path.arcTo.zeroradius" title="2d.path.arcTo.zeroradius">#</a> <a href="2d.path.arcTo.zero.1.html">2d.path.arcTo.zero.1</a> <a href="2d.path.arcTo.zero.2.html">2d.path.arcTo.zero.2</a> </span>, then the method must add the point
   (<var title="">x1</var>, <var title="">y1</var>) to the subpath, and
   connect that point to the previous point (<var title="">x0</var>, <var title="">y0</var>) by a straight line.

  </p><p>Otherwise, if the points (<var title="">x0</var>, <var title="">y0</var>), (<var title="">x1</var>, <var title="">y1</var>), and
   (<var title="">x2</var>, <var title="">y2</var>) all lie on a single
   straight line, then: if the direction from (<var title="">x0</var>, <var title="">y0</var>) to (<var title="">x1</var>, <var title="">y1</var>) is
   the same as the direction from (<var title="">x1</var>, <var title="">y1</var>) to (<var title="">x2</var>, <var title="">y2</var>),
   then the method must add the point (<var title="">x1</var>, <var title="">y1</var>) to the subpath, and connect that point to the previous
   point (<var title="">x0</var>, <var title="">y0</var>) by a straight line<span class="testrefs kw-must" id="testrefs.2d.path.arcTo.collinear.same"> <a href="#testrefs.2d.path.arcTo.collinear.same" title="2d.path.arcTo.collinear.same">#</a> <a href="2d.path.arcTo.collinear.1.html">2d.path.arcTo.collinear.1</a> </span>;
   otherwise, the direction from (<var title="">x0</var>, <var title="">y0</var>) to (<var title="">x1</var>, <var title="">y1</var>) is
   the opposite of the direction from (<var title="">x1</var>, <var title="">y1</var>) to (<var title="">x2</var>, <var title="">y2</var>),
   and the method must add a point (<var title="">x<sub>∞</sub></var>,
   <var title="">y<sub>∞</sub></var>) to the subpath, and connect that
   point to the previous point (<var title="">x0</var>, <var title="">y0</var>) by a straight line, where (<var title="">x<sub>∞</sub></var>, <var title="">y<sub>∞</sub></var>) is the point that is infinitely far
   away from (<var title="">x1</var>, <var title="">y1</var>), that lies on
   the same line as (<var title="">x0</var>, <var title="">y0</var>), (<var title="">x1</var>, <var title="">y1</var>), and (<var title="">x2</var>,
   <var title="">y2</var>), and that is on the same side of (<var title="">x1</var>, <var title="">y1</var>) on that line as (<var title="">x2</var>, <var title="">y2</var>)<span class="testrefs kw-must" id="testrefs.2d.path.arcTo.collinear.opposite"> <a href="#testrefs.2d.path.arcTo.collinear.opposite" title="2d.path.arcTo.collinear.opposite">#</a> <a href="2d.path.arcTo.collinear.2.html">2d.path.arcTo.collinear.2</a> <a href="2d.path.arcTo.collinear.3.html">2d.path.arcTo.collinear.3</a> </span>.

  </p><p>Otherwise, let <var title="">The Arc</var> be the shortest arc given by
   circumference of the circle that has radius <var title="">radius</var>,
   and that has one point tangent to the half-infinite line that crosses the
   point (<var title="">x0</var>, <var title="">y0</var>) and ends at the
   point (<var title="">x1</var>, <var title="">y1</var>), and that has a
   different point tangent to the half-infinite line that ends at the point
   (<var title="">x1</var>, <var title="">y1</var>) and crosses the point
   (<var title="">x2</var>, <var title="">y2</var>). The points at which this
   circle touches these two lines are called the start and end tangent points
   respectively.

  </p><p>The method must connect the point (<var title="">x0</var>, <var title="">y0</var>) to the start tangent point by a straight line, adding
   the start tangent point to the subpath, and then must connect the start
   tangent point to the end tangent point by <var title="">The Arc</var>,
   adding the end tangent point to the subpath<span class="testrefs kw-must" id="testrefs.2d.path.arcTo.shape"> <a href="#testrefs.2d.path.arcTo.shape" title="2d.path.arcTo.shape">#</a> <a href="2d.path.arcTo.shape.curve1.html">2d.path.arcTo.shape.curve1</a> <a href="2d.path.arcTo.shape.curve2.html">2d.path.arcTo.shape.curve2</a> <a href="2d.path.arcTo.shape.start.html">2d.path.arcTo.shape.start</a> <a href="2d.path.arcTo.shape.end.html">2d.path.arcTo.shape.end</a> </span>.

  </p><p>The <dfn id="arcx-" title="dom-context-2d-arc"><code>arc(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</code></dfn> method draws an arc. If the
   context has any subpaths, then the method must add a straight line from
   the last point in the subpath to the start point of the arc<span class="testrefs kw-must" id="testrefs.2d.path.arc.nonempty"> <a href="#testrefs.2d.path.arc.nonempty" title="2d.path.arc.nonempty">#</a> <a href="2d.path.arc.empty.html">2d.path.arc.empty</a> <a href="2d.path.arc.nonempty.html">2d.path.arc.nonempty</a> </span>. In any case,
   it must draw the arc between the start point of the arc and the end point
   of the arc, and add the start and end points of the arc to the subpath<span class="testrefs kw-must" id="testrefs.2d.path.arc.draw"> <a href="#testrefs.2d.path.arc.draw" title="2d.path.arc.draw">#</a> <a href="2d.path.arc.end.html">2d.path.arc.end</a> <a href="2d.path.arc.angle.1.html">2d.path.arc.angle.1</a> <a href="2d.path.arc.angle.2.html">2d.path.arc.angle.2</a> <a href="2d.path.arc.angle.3.html">2d.path.arc.angle.3</a> <a href="2d.path.arc.angle.4.html">2d.path.arc.angle.4</a> <a href="2d.path.arc.angle.5.html">2d.path.arc.angle.5</a> <a href="2d.path.arc.angle.6.html">2d.path.arc.angle.6</a> <a href="2d.path.arc.zero.1.html">2d.path.arc.zero.1</a> <a href="2d.path.arc.zero.2.html">2d.path.arc.zero.2</a> <a href="2d.path.arc.twopie.1.html">2d.path.arc.twopie.1</a> <a href="2d.path.arc.twopie.2.html">2d.path.arc.twopie.2</a> <a href="2d.path.arc.twopie.3.html">2d.path.arc.twopie.3</a> <a href="2d.path.arc.twopie.4.html">2d.path.arc.twopie.4</a> <a href="2d.path.arc.shape.1.html">2d.path.arc.shape.1</a> <a href="2d.path.arc.shape.2.html">2d.path.arc.shape.2</a> <a href="2d.path.arc.shape.3.html">2d.path.arc.shape.3</a> <a href="2d.path.arc.shape.4.html">2d.path.arc.shape.4</a> <a href="2d.path.arc.shape.5.html">2d.path.arc.shape.5</a> <a href="2d.path.arc.selfintersect.1.html">2d.path.arc.selfintersect.1</a> <a href="2d.path.arc.selfintersect.2.html">2d.path.arc.selfintersect.2</a> <a href="2d.path.arc.scale.2.html">2d.path.arc.scale.2</a> </span>.
   The arc and its start and end points are defined as follows:

  </p><p>Consider a circle that has its origin at (<var title="">x</var>, <var title="">y</var>) and that has radius <var title="">radius</var>. The
   points at <var title="">startAngle</var> and <var title="">endAngle</var>
   along this circle's circumference, measured in radians clockwise from the
   positive x-axis, are the start and end points respectively.

  </p><p>If the <var title="">anticlockwise</var> argument is false and
   <span><var title="">endAngle</var>-<var title="">startAngle</var></span>
   is equal to or greater than <span>2π</span>, or, if the <var title="">anticlockwise</var> argument is <em>true</em> and <span><var title="">startAngle</var>-<var title="">endAngle</var></span> is equal to
   or greater than <span>2π</span>, then the arc is the whole
   circumference of this circle.</p>
  <!--alternatively (this is not equivalent, but might make more
  sense, if browsers are willing to change to it: <p>If the absolute
  magnitude of the difference between the <var
  title="">startAngle</var> and <var title="">endAngle</var> angles is
  equal to or greater than <span>2&pi;</span>, then the arc is the
  whole circumference of this circle.</p>-->

  <p>Otherwise, the arc is the path along the circumference of this circle
   from the start point to the end point, going anti-clockwise if the <var title="">anticlockwise</var> argument is true, and clockwise otherwise.
   Since the points are on the circle, as opposed to being simply angles from
   zero, the arc can never cover an angle greater than <span>2π</span>
   radians. If the two points are the same, or if the radius is zero<span class="testrefs kw-none" id="testrefs.2d.path.arc.zero"> <a href="#testrefs.2d.path.arc.zero" title="2d.path.arc.zero">#</a> <a href="2d.path.arc.zeroradius.html">2d.path.arc.zeroradius</a> </span>, then
   the arc is defined as being of zero length in both directions.

  </p><p>Negative values for <var title="">radius</var> must cause the
   implementation to raise an <code>INDEX_SIZE_ERR</code> exception<span class="testrefs kw-must" id="testrefs.2d.path.arc.negative"> <a href="#testrefs.2d.path.arc.negative" title="2d.path.arc.negative">#</a> <a href="2d.path.arc.negative.html">2d.path.arc.negative</a> </span>.

  </p><p>The <dfn id="rectx" title="dom-context-2d-rect"><code>rect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must create a new subpath containing
   just the four points (<var title="">x</var>, <var title="">y</var>), (<var title="">x</var>+<var title="">w</var>, <var title="">y</var>), (<var title="">x</var>+<var title="">w</var>, <var title="">y</var>+<var title="">h</var>), (<var title="">x</var>, <var title="">y</var>+<var title="">h</var>), with those four points connected by straight lines<span class="testrefs kw-must" id="testrefs.2d.path.rect.subpath"> <a href="#testrefs.2d.path.rect.subpath" title="2d.path.rect.subpath">#</a> <a href="2d.path.rect.basic.html">2d.path.rect.basic</a> <a href="2d.path.rect.newsubpath.html">2d.path.rect.newsubpath</a> <a href="2d.path.rect.zero.1.html">2d.path.rect.zero.1</a> <a href="2d.path.rect.zero.2.html">2d.path.rect.zero.2</a> <a href="2d.path.rect.zero.3.html">2d.path.rect.zero.3</a> <a href="2d.path.rect.zero.4.html">2d.path.rect.zero.4</a> <a href="2d.path.rect.zero.5.html">2d.path.rect.zero.5</a> <a href="2d.path.rect.zero.6.html">2d.path.rect.zero.6</a> <a href="2d.path.rect.negative.html">2d.path.rect.negative</a> <a href="2d.path.rect.winding.html">2d.path.rect.winding</a> </span>, and
   must then mark the subpath as closed<span class="testrefs kw-must" id="testrefs.2d.path.rect.closed"> <a href="#testrefs.2d.path.rect.closed" title="2d.path.rect.closed">#</a> <a href="2d.path.rect.closed.html">2d.path.rect.closed</a> </span>. It must then create a new subpath
   with the point (<var title="">x</var>, <var title="">y</var>) as the only
   point in the subpath<span class="testrefs kw-must" id="testrefs.2d.path.rect.newsubpath"> <a href="#testrefs.2d.path.rect.newsubpath" title="2d.path.rect.newsubpath">#</a> <a href="2d.path.rect.end.1.html">2d.path.rect.end.1</a> <a href="2d.path.rect.end.2.html">2d.path.rect.end.2</a> </span>.

  </p><p>The <dfn id="fill" title="dom-context-2d-fill"><code>fill()</code></dfn>
   method must fill all the subpaths of the current path, using <code title="dom-context-2d-fillStyle"><a href="#fillstyle">fillStyle</a></code>,
   and using the non-zero winding number rule<span class="testrefs kw-must" id="testrefs.2d.path.fill.basic"> <a href="#testrefs.2d.path.fill.basic" title="2d.path.fill.basic">#</a> <a href="2d.path.fill.overlap.html">2d.path.fill.overlap</a> <a href="2d.path.fill.winding.add.html">2d.path.fill.winding.add</a> <a href="2d.path.fill.winding.subtract.1.html">2d.path.fill.winding.subtract.1</a> <a href="2d.path.fill.winding.subtract.2.html">2d.path.fill.winding.subtract.2</a> <a href="2d.path.fill.winding.subtract.3.html">2d.path.fill.winding.subtract.3</a> </span>. Open subpaths must be
   implicitly closed when being filled (without affecting the actual
   subpaths)<span class="testrefs kw-must" id="testrefs.2d.path.fill.closed"> <a href="#testrefs.2d.path.fill.closed" title="2d.path.fill.closed">#</a> <a href="2d.path.fill.closed.basic.html">2d.path.fill.closed.basic</a> <a href="2d.path.fill.closed.unaffected.html">2d.path.fill.closed.unaffected</a> </span>.

  </p><p class="note">Thus, if two overlapping but otherwise independent subpaths
   have opposite windings, they cancel out and result in no fill. If they
   have the same winding, that area just gets painted once.

  </p><p>The <dfn id="stroke" title="dom-context-2d-stroke"><code>stroke()</code></dfn> method must
   calculate the strokes of all the subpaths of the current path, using the
   <code title="dom-context-2d-lineWidth"><a href="#linewidth">lineWidth</a></code>, <code title="dom-context-2d-lineCap"><a href="#linecap">lineCap</a></code>, <code title="dom-context-2d-lineJoin"><a href="#linejoin">lineJoin</a></code>, and
   (if appropriate) <code title="dom-context-2d-miterLimit"><a href="#miterlimit">miterLimit</a></code> attributes, and then fill the
   combined stroke area using the <code title="dom-context-2d-strokeStyle"><a href="#strokestyle">strokeStyle</a></code>, attribute<span class="testrefs kw-must" id="testrefs.2d.path.stroke.basic"> <a href="#testrefs.2d.path.stroke.basic" title="2d.path.stroke.basic">#</a> <a href="2d.path.stroke.overlap.html">2d.path.stroke.overlap</a> <a href="2d.path.stroke.union.html">2d.path.stroke.union</a> <a href="2d.path.stroke.unaffected.html">2d.path.stroke.unaffected</a> </span>.

  </p><p class="note">Since the subpaths are all stroked as one, overlapping parts
   of the paths in one stroke operation are treated as if their union was
   what was painted.

  </p><p>Paths, when filled or stroked, must be painted without affecting the
   current path<span class="testrefs kw-must" id="testrefs.2d.path.unaffected"> <a href="#testrefs.2d.path.unaffected" title="2d.path.unaffected">#</a> </span>, and must be subject to <a href="#shadows0" title="shadows">shadow effects</a>, <a href="#globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, the <a href="#clipping" title="clipping region">clipping region</a>, and <a href="#globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
   operators</a><span class="testrefs kw-must" id="testrefs.2d.path.subjected"> <a href="#testrefs.2d.path.subjected" title="2d.path.subjected">#</a> </span>. (Transformations affect the path when the path is created,
   not when it is painted, though the stroke <em title="">style</em> is still
   affected by the transformation during painting.)

  </p><p>Zero-length line segments must be pruned before stroking a path<span class="testrefs kw-must" id="testrefs.2d.path.stroke.prune"> <a href="#testrefs.2d.path.stroke.prune" title="2d.path.stroke.prune">#</a> <a href="2d.path.stroke.prune.line.html">2d.path.stroke.prune.line</a> <a href="2d.path.stroke.prune.closed.html">2d.path.stroke.prune.closed</a> <a href="2d.path.stroke.prune.curve.html">2d.path.stroke.prune.curve</a> <a href="2d.path.stroke.prune.arc.html">2d.path.stroke.prune.arc</a> <a href="2d.path.stroke.prune.rect.html">2d.path.stroke.prune.rect</a> <a href="2d.path.stroke.prune.corner.html">2d.path.stroke.prune.corner</a> </span>. Empty
   subpaths must be ignored<span class="testrefs kw-must" id="testrefs.2d.path.stroke.empty"> <a href="#testrefs.2d.path.stroke.empty" title="2d.path.stroke.empty">#</a> <a href="2d.path.stroke.empty.html">2d.path.stroke.empty</a> </span>.

  </p><p>The <dfn id="clip" title="dom-context-2d-clip"><code>clip()</code></dfn>
   method must create a new <dfn id="clipping">clipping region</dfn> by
   calculating the intersection of the current clipping region and the area
   described by the current path, using the non-zero winding number rule<span class="testrefs kw-must" id="testrefs.2d.path.clip.basic"> <a href="#testrefs.2d.path.clip.basic" title="2d.path.clip.basic">#</a> <a href="2d.path.clip.empty.html">2d.path.clip.empty</a> <a href="2d.path.clip.basic.1.html">2d.path.clip.basic.1</a> <a href="2d.path.clip.basic.2.html">2d.path.clip.basic.2</a> <a href="2d.path.clip.intersect.html">2d.path.clip.intersect</a> <a href="2d.path.clip.winding.1.html">2d.path.clip.winding.1</a> <a href="2d.path.clip.winding.2.html">2d.path.clip.winding.2</a> </span>.
   Open subpaths must be implicitly closed when computing the clipping
   region, without affecting the actual subpaths<span class="testrefs kw-must" id="testrefs.2d.path.clip.closed"> <a href="#testrefs.2d.path.clip.closed" title="2d.path.clip.closed">#</a> <a href="2d.path.clip.unaffected.html">2d.path.clip.unaffected</a> </span>. The new clipping region
   replaces the current clipping region.

  </p><p>When the context is initialized, the clipping region must be set to the
   rectangle with the top left corner at (0,0) and the width and height of
   the coordinate space<span class="testrefs kw-must" id="testrefs.2d.path.clip.initial"> <a href="#testrefs.2d.path.clip.initial" title="2d.path.clip.initial">#</a> </span>.</p>
  <!-- XXXv4
   Jordan OSETE suggests:
    * support ways of extending the clipping region (union instead of intersection)
       - also "add", "subtract", "replace", "intersect" and "xor"
    * support ways of resetting the clipping region without save/restore
  -->

  <p>The <dfn id="ispointinpath" title="dom-context-2d-isPointInPath"><code>isPointInPath(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must return
   true if the point given by the <var title="">x</var> and <var title="">y</var> coordinates passed to the method, when treated as
   coordinates in the canvas coordinate space unaffected by the current
   transformation, is inside the current path; and must return false
   otherwise<span class="testrefs kw-must" id="testrefs.2d.path.isPointInPath"> <a href="#testrefs.2d.path.isPointInPath" title="2d.path.isPointInPath">#</a> <a href="2d.path.isPointInPath.basic.1.html">2d.path.isPointInPath.basic.1</a> <a href="2d.path.isPointInPath.basic.2.html">2d.path.isPointInPath.basic.2</a> <a href="2d.path.isPointInPath.empty.html">2d.path.isPointInPath.empty</a> <a href="2d.path.isPointInPath.subpath.html">2d.path.isPointInPath.subpath</a> <a href="2d.path.isPointInPath.outside.html">2d.path.isPointInPath.outside</a> <a href="2d.path.isPointInPath.unclosed.html">2d.path.isPointInPath.unclosed</a> <a href="2d.path.isPointInPath.arc.html">2d.path.isPointInPath.arc</a> <a href="2d.path.isPointInPath.bigarc.html">2d.path.isPointInPath.bigarc</a> <a href="2d.path.isPointInPath.bezier.html">2d.path.isPointInPath.bezier</a> <a href="2d.path.isPointInPath.winding.html">2d.path.isPointInPath.winding</a> <a href="2d.path.isPointInPath.transform.1.html">2d.path.isPointInPath.transform.1</a> <a href="2d.path.isPointInPath.transform.2.html">2d.path.isPointInPath.transform.2</a> <a href="2d.path.isPointInPath.transform.3.html">2d.path.isPointInPath.transform.3</a> </span>. Points on the path itself are considered to be inside the path<span class="testrefs kw-must" id="testrefs.2d.path.isPointInPath.edge"> <a href="#testrefs.2d.path.isPointInPath.edge" title="2d.path.isPointInPath.edge">#</a> <a href="2d.path.isPointInPath.edge.html">2d.path.isPointInPath.edge</a> </span>.
   If either of the arguments is infinite or NaN, then the method must return
   false<span class="testrefs kw-must" id="testrefs.2d.path.isPointInPath.nonfinite"> <a href="#testrefs.2d.path.isPointInPath.nonfinite" title="2d.path.isPointInPath.nonfinite">#</a> <a href="2d.path.isPointInPath.nonfinite.html">2d.path.isPointInPath.nonfinite</a> </span>.

  </p><h6 id="text"><span class="secno">4.7.11.1.9. </span>Text</h6>
  <!-- a v3 feature -->

  <p>The <dfn id="font" title="dom-context-2d-font"><code>font</code></dfn> DOM
   attribute, on setting, must be parsed the same way as the 'font' property
   of CSS (but without supporting property-independent stylesheet syntax like
   'inherit'), and the resulting font must be assigned to the context, with
   the 'line-height' component forced to 'normal'. <a href="#refsCSS">[CSS]</a><!-- XXX generic
  version-independent reference -->

  </p><p>Font names must be interpreted in the context of the <code><a href="#canvas">canvas</a></code> element's stylesheets; any fonts embedded
   using <code title="">@font-face</code> must therefore be available. <a href="#refsCSSWEBFONTS">[CSSWEBFONTS]</a>

  </p><p>Only vector fonts should be used by the user agent; if a user agent were
   to use bitmap fonts then transformations would likely make the font look
   very ugly.

  </p><p>On getting, the <code title="dom-context-2d-font"><a href="#font">font</a></code> attribute must return the serialized form of
   the current font of the context. <a href="#refsCSSOM">[CSSOM]</a><!-- XXX ensure that this
  defines serialization of 'font' -->

  </p><p>When the context is created, the font of the context must be set to 10px
   sans-serif. When the 'font-size' component is set to lengths using
   percentages, 'em' or 'ex' units, or the 'larger' or 'smaller' keywords,
   these must be interpreted relative to the computed value of the
   'font-size' property of the corresponding <code><a href="#canvas">canvas</a></code> element at the time that the attribute is
   set. When the 'font-weight' component is set to the relative values
   'bolder' and 'lighter', these must be interpreted relative to the computed
   value of the 'font-weight' property of the corresponding <code><a href="#canvas">canvas</a></code> element at the time that the attribute is
   set. If the computed values are undefined for a particular case (e.g.
   because the <code><a href="#canvas">canvas</a></code> element is not in a
   document), then the relative keywords must be interpreted relative to the
   normal-weight 10px sans-serif default.

  </p><p>The <dfn id="textalign" title="dom-context-2d-textAlign"><code>textAlign</code></dfn> DOM attribute,
   on getting, must return the current value. On setting, if the value is one
   of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the value must be changed to the new value.
   Otherwise, the new value must be ignored. When the context is created, the
   <code title="dom-context-2d-textAlign"><a href="#textalign">textAlign</a></code> attribute must initially have the
   value <code title="">start</code>.

  </p><p>The <dfn id="textbaseline" title="dom-context-2d-textBaseline"><code>textBaseline</code></dfn> DOM
   attribute, on getting, must return the current value. On setting, if the
   value is one of <code title="dom-context-2d-textBaseline-top"><a href="#top">top</a></code>, <code title="dom-context-2d-textBaseline-hanging"><a href="#hanging">hanging</a></code>, <code title="dom-context-2d-textBaseline-middle"><a href="#middle">middle</a></code>, <code title="dom-context-2d-textBaseline-alphabetic"><a href="#alphabetic">alphabetic</a></code>, <code title="dom-context-2d-textBaseline-ideographic"><a href="#ideographic">ideographic</a></code>, or <code title="dom-context-2d-textBaseline-bottom"><a href="#bottom">bottom</a></code>, then the value must be changed to the
   new value. Otherwise, the new value must be ignored. When the context is
   created, the <code title="dom-context-2d-textBaseline"><a href="#textbaseline">textBaseline</a></code> attribute must initially have
   the value <code title="">alphabetic</code>.

  </p><p>The <code title="dom-context-2d-textBaseline"><a href="#textbaseline">textBaseline</a></code> attribute's allowed keywords
   correspond to alignment points in the font:

  </p><p><img src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png" alt="The top of the em square is roughly at the top of the glyphs    in a font, the hanging baseline is where some glyphs like आ are    anchored, the middle is half-way between the top of the em square and the    bottom of the em square, the alphabetic baseline is where characters like    Á, ÿ, f, and Ω are anchored, the ideographic    baseline is where glyphs like 私 and 達 are anchored, and the    bottom of the em square is roughly at the bottom of the glyphs in a font.    The top and bottom of the bounding box can be far from these baselines,    due to glyphs extending far outside the em square.">

  </p><p>The keywords map to these alignment points as follows:

  </p><dl>
   <dt><dfn id="top" title="dom-context-2d-textBaseline-top"><code>top</code></dfn>

   </dt><dd>The top of the em square

   </dd><dt><dfn id="hanging" title="dom-context-2d-textBaseline-hanging"><code>hanging</code></dfn>

   </dt><dd>The hanging baseline

   </dd><dt><dfn id="middle" title="dom-context-2d-textBaseline-middle"><code>middle</code></dfn>

   </dt><dd>The middle of the em square

   </dd><dt><dfn id="alphabetic" title="dom-context-2d-textBaseline-alphabetic"><code>alphabetic</code></dfn>
    

   </dt><dd>The alphabetic baseline

   </dd><dt><dfn id="ideographic" title="dom-context-2d-textBaseline-ideographic"><code>ideographic</code></dfn>
    

   </dt><dd>The ideographic baseline

   </dd><dt><dfn id="bottom" title="dom-context-2d-textBaseline-bottom"><code>bottom</code></dfn>

   </dt><dd>The bottom of the em square
  </dd></dl>

  <p>The <dfn id="filltext" title="dom-context-2d-fillText"><code>fillText()</code></dfn> and <dfn id="stroketext" title="dom-context-2d-strokeText"><code>strokeText()</code></dfn> methods
   take three or four arguments, <var title="">text</var>, <var title="">x</var>, <var title="">y</var>, and optionally <var title="">maxWidth</var>, and render the given <var title="">text</var> at
   the given (<var title="">x</var>, <var title="">y</var>) coordinates
   ensuring that the text isn't wider than <var title="">maxWidth</var> if
   specified, using the current <code title="dom-context-2d-font"><a href="#font">font</a></code>, <code title="dom-context-2d-textAlign"><a href="#textalign">textAlign</a></code>, and <code title="dom-context-2d-textBaseline"><a href="#textbaseline">textBaseline</a></code> values. Specifically, when
   the methods are called, the user agent must run the following steps:

  </p><ol>
   <li>
    <p>Let <var title="">font</var> be the current font of the browsing
     context, as given by the <code title="dom-context-2d-font"><a href="#font">font</a></code> attribute.

   </p></li><li>
    <p>Replace all the <a href="#space" title="space character">space
     characters</a> in <var title="">text</var> with U+0020 SPACE characters.

   </p></li><li>
    <p>Form a hypothetical infinitely wide CSS line box containing a single
     inline box containing the text <var title="">text</var>, with all the
     properties at their initial values except the 'font' property of the
     inline element set to <var title="">font</var> and the 'direction'
     property of the inline element set to the 'direction' property of the
     <code><a href="#canvas">canvas</a></code> element. <a href="#refsCSS">[CSS]</a>
   </p></li>
   <!-- XXXDIR somehow mention
   somewhere that if you don't support CSS, dir="" still maps to
   'direction' for the purposes of things like this. -->
   <!-- if you insert a step here, make sure to adjust the next step's
   final words -->

   <li>
    <p>If the <var title="">maxWidth</var> argument was specified and the
     hypothetical width of the inline box in the hypothetical line box is
     greater than <var title="">maxWidth</var> CSS pixels, then change <var title="">font</var> to have a more condensed font (if one is available
     or if a reasonably readable one can be synthesized by applying a
     horizontal scale factor to the font) or a smaller font, and return to
     the previous step.

   </p></li><li>
    <p>Let the <var title="">anchor point</var> be a point on the inline box,
     determined by the <code title="dom-context-2d-textAlign"><a href="#textalign">textAlign</a></code> and <code title="dom-context-2d-textBaseline"><a href="#textbaseline">textBaseline</a></code> values, as follows:</p>

    <p>Horizontal position:</p>

    <dl>
     <dt> If <code title="dom-context-2d-textAlign"><a href="#textalign">textAlign</a></code> is <code title="">left</code>

     </dt><dt> If <code title="dom-context-2d-textAlign"><a href="#textalign">textAlign</a></code> is <code title="">start</code>
      and the 'direction'<!--XXXDIR--> property on the <code><a href="#canvas">canvas</a></code> element has a computed value of 'ltr'

     </dt><dt> If <code title="dom-context-2d-textAlign"><a href="#textalign">textAlign</a></code> is <code title="">end</code> and
      the 'direction'<!--XXXDIR--> property on the <code><a href="#canvas">canvas</a></code> element has a computed value of 'rtl'

     </dt><dd>Let the <var title="">anchor point</var>'s horizontal position be
      the left edge of the inline box.

     </dd><dt> If <code title="dom-context-2d-textAlign"><a href="#textalign">textAlign</a></code> is <code title="">right</code>

     </dt><dt> If <code title="dom-context-2d-textAlign"><a href="#textalign">textAlign</a></code> is <code title="">end</code> and
      the 'direction'<!--XXXDIR--> property on the <code><a href="#canvas">canvas</a></code> element has a computed value of 'ltr'

     </dt><dt> If <code title="dom-context-2d-textAlign"><a href="#textalign">textAlign</a></code> is <code title="">start</code>
      and the 'direction'<!--XXXDIR--> property on the <code><a href="#canvas">canvas</a></code> element has a computed value of 'rtl'

     </dt><dd>Let the <var title="">anchor point</var>'s horizontal position be
      the right edge of the inline box.

     </dd><dt> If <code title="dom-context-2d-textAlign"><a href="#textalign">textAlign</a></code> is <code title="">center</code>

     </dt><dd>Let the <var title="">anchor point</var>'s horizontal position be
      half way between the left and right edges of the inline box.
    </dd></dl>

    <p>Vertical position:</p>

    <dl>
     <dt> If <code title="dom-context-2d-textBaseline"><a href="#textbaseline">textBaseline</a></code> is <code title="dom-context-2d-textBaseline-top"><a href="#top">top</a></code>

     </dt><dd>Let the <var title="">anchor point</var>'s vertical position be the
      top of the em box of the first available font of the inline box.

     </dd><dt> If <code title="dom-context-2d-textBaseline"><a href="#textbaseline">textBaseline</a></code> is <code title="dom-context-2d-textBaseline-hanging"><a href="#hanging">hanging</a></code>

     </dt><dd>Let the <var title="">anchor point</var>'s vertical position be the
      hanging baseline of the first available font of the inline box.

     </dd><dt> If <code title="dom-context-2d-textBaseline"><a href="#textbaseline">textBaseline</a></code> is <code title="dom-context-2d-textBaseline-middle"><a href="#middle">middle</a></code>

     </dt><dd>Let the <var title="">anchor point</var>'s vertical position be half
      way between the bottom and the top of the em box of the first available
      font of the inline box.

     </dd><dt> If <code title="dom-context-2d-textBaseline"><a href="#textbaseline">textBaseline</a></code> is <code title="dom-context-2d-textBaseline-alphabetic"><a href="#alphabetic">alphabetic</a></code>

     </dt><dd>Let the <var title="">anchor point</var>'s vertical position be the
      alphabetic baseline of the first available font of the inline box.

     </dd><dt> If <code title="dom-context-2d-textBaseline"><a href="#textbaseline">textBaseline</a></code> is <code title="dom-context-2d-textBaseline-ideographic"><a href="#ideographic">ideographic</a></code>

     </dt><dd>Let the <var title="">anchor point</var>'s vertical position be the
      ideographic baseline of the first available font of the inline box.

     </dd><dt> If <code title="dom-context-2d-textBaseline"><a href="#textbaseline">textBaseline</a></code> is <code title="dom-context-2d-textBaseline-bottom"><a href="#bottom">bottom</a></code>

     </dt><dd>Let the <var title="">anchor point</var>'s vertical position be the
      bottom of the em box of the first available font of the inline box.
    </dd></dl>

   </li><li>
    <p>Paint the hypothetical inline box as the shape given by the text's
     glyphs, as transformed by the <a href="#transformations0" title="dom-context-2d-transformation">current transformation matrix</a>,
     and anchored and sized so that before applying the <a href="#transformations0" title="dom-context-2d-transformation">current
     transformation matrix</a>, the <var title="">anchor point</var> is at
     (<var title="">x</var>, <var title="">y</var>) and each CSS pixel is
     mapped to one coordinate space unit.</p>

    <p>For <code title="dom-context-2d-fillText"><a href="#filltext">fillText()</a></code> <code title="dom-context-2d-fillStyle"><a href="#fillstyle">fillStyle</a></code>
     must be applied to the glyphs and <code title="dom-context-2d-strokeStyle"><a href="#strokestyle">strokeStyle</a></code> must be ignored. For <code title="dom-context-2d-strokeText"><a href="#stroketext">strokeText()</a></code> the reverse holds and <code title="dom-context-2d-strokeStyle"><a href="#strokestyle">strokeStyle</a></code> must be applied to the glyph
     outlines and <code title="dom-context-2d-fillStyle"><a href="#fillstyle">fillStyle</a></code> must be ignored.</p>

    <p>Text is painted without affecting the current path, and is subject to
     <a href="#shadows0" title="shadows">shadow effects</a>, <a href="#globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>,
     the <a href="#clipping" title="clipping region">clipping region</a>, and
     <a href="#globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
     operators</a>.</p>
  </li></ol>
  <!--XXXDVT - this is commented out until CSS can get its act together
enough to actual specify vertical text rendering (how long have we
been waiting now?)

  <p>The <dfn
  title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
  and <dfn
  title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
  methods take three or four arguments, <var title="">text</var>, <var
  title="">x</var>, <var title="">y</var>, and optionally <var
  title="">maxHeight</var>, and render the given <var
  title="">text</var> as vertical text at the given (<var
  title="">x</var>, <var title="">y</var>) coordinates ensuring that
  the text isn't taller than <var title="">maxHeight</var> if
  specified, using the current <code
  title="dom-context-2d-font">font</code> and <code
  title="dom-context-2d-textAlign">textAlign</code>
  values. Specifically, when the methods are called, the user agent
  must run the following steps:</p>

  <ol>

   <li><p>Let <var title="">font</var> be the current font of the
   browsing context, as given by the <code
   title="dom-context-2d-font">font</code> attribute.</p></li>

   <li><p>Replace all the <span title="space character">space
   characters</span> in <var title="">text</var> with U+0020 SPACE
   characters.</p></li>

   <li><p>Form a <em class="big-issue">whatever CSS ends up calling
   vertical line boxes and inline boxes</em> containing the text <var
   title="">text</var>, with all the properties at their initial
   values except the 'font' property of the inline element set to <var
   title="">font</var> and the 'direction' property of the inline
   element set to the 'direction' property of the <code>canvas</code>
   element.</p></li><!- - XXXDIR - ->

   <!- - if you insert a step here, make sure to adjust the next step's
   final words - ->

   <li><p>If the <var title="">maxHeight</var> argument was specified
   and the hypothetical height of the <em class="big-issue">box</em>
   in the hypothetical line box is greater than <var
   title="">maxHeight</var> CSS pixels, then change <var
   title="">font</var> to have a more condensed font (if one is
   available or if a reasonably readable one can be synthesized by
   applying an appropriate scale factor to the font) or a smaller
   font, and return to the previous step.</p></li>

   <li>

    <p>Let the <var title="">anchor point</var> be a point on the <em
    class="big-issue">inline box</var>, determined by the <code
    title="dom-context-2d-textAlign">textAlign</code>, as follows:</p>

    <p>Vertical position:</p>

    <dl>

     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">start</code></dt>
     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">left</code> and the 'direction'<!- -XXXDIR- -> property
     on the <code>canvas</code> element has a computed value of
     'ltr'</dt>
     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">right</code> and the 'direction'<!- -XXXDIR- -> property
     on the <code>canvas</code> element has a computed value of
     'rtl'</dt>

     <dd>Let the <var title="">anchor point</var>'s vertical
     position be the top edge of the <em class="big-issue">inline
     box</em>.</dd>

     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">end</code></dt>
     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">right</code> and the 'direction'<!- -XXXDIR- -> property
     on the <code>canvas</code> element has a computed value of
     'ltr'</dt>
     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">left</code> and the 'direction'<!- -XXXDIR- -> property on
     the <code>canvas</code> element has a computed value of
     'rtl'</dt>

     <dd>Let the <var title="">anchor point</var>'s vertical
     position be the bottom edge of the <em class="big-issue">inline
     box</em>.</dd>


     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">center</code></dt>

     <dd>Let the <var title="">anchor point</var>'s vertical position
     be half way between the top and bottom edges of the <em
     class="big-issue">inline box</em>.</dd>

    </dl>

    <p>Let the horizontal position be half way between the left and
    right edges of the em box of the first available font of the <em
    class="big-issue">inline box</em>.</p>

   </li>

   <li>

    <p>Paint the hypothetical inline box as the shape given by the
    text's glyphs, as transformed by the <span
    title="dom-context-2d-transformation">current transformation
    matrix</span>, and anchored and sized so that before applying the
    <span title="dom-context-2d-transformation">current transformation
    matrix</span>, the <var title="">anchor point</var> is at (<var
    title="">x</var>, <var title="">y</var>) and each CSS pixel is
    mapped to one coordinate space unit.</p>

    <p>For <code
    title="dom-context-2d-fillVerticalText">fillVerticalText()</code>
    <code title="dom-context-2d-fillStyle">fillStyle</code> must be
    applied and <code
    title="dom-context-2d-strokeStyle">strokeStyle</code> must be
    ignored. For <code
    title="dom-context-2d-strokeVerticalText">strokeVerticalText()</code>
    the reverse holds and <code
    title="dom-context-2d-strokeStyle">strokeStyle</code> must be
    applied and <code
    title="dom-context-2d-fillStyle">fillStyle</code> must be
    ignored.</p>

    <p>Text is painted without affecting the current path, and is
    subject to <span title="shadows">shadow effects</span>, <span
    title="dom-context-2d-globalAlpha">global alpha</span>, the <span
    title="clipping region">clipping region</span>, and <span
    title="dom-context-2d-globalCompositeOperation">global composition
    operators</span>.</p>

   </li>

  </ol>

XXXDVT (also check for '- -' bits in the part above) -->

  <p>The <dfn id="measuretext" title="dom-context-2d-measureText"><code>measureText()</code></dfn> method
   takes one argument, <var title="">text</var>. When the method is invoked,
   the user agent must replace all the <a href="#space" title="space    character">space characters</a> in <var title="">text</var> with U+0020
   SPACE characters, and then must form a hypothetical infinitely wide CSS
   line box containing a single inline box containing the text <var title="">text</var>, with all the properties at their initial values
   except the 'font' property of the inline element set to the current font
   of the browsing context, as given by the <code title="dom-context-2d-font"><a href="#font">font</a></code> attribute, and
   must then return a new <code><a href="#textmetrics">TextMetrics</a></code>
   object with its <code title="dom-textmetrics-width"><a href="#width2">width</a></code> attribute set to the width of that inline
   box, in CSS pixels. <a href="#refsCSS">[CSS]</a>

  </p><p>The <code><a href="#textmetrics">TextMetrics</a></code> interface is
   used for the objects returned from <code title="dom-context-2d-measureText"><a href="#measuretext">measureText()</a></code>. It has one attribute, <dfn id="width2" title="dom-textmetrics-width"><code>width</code></dfn>, which is
   set by the <code title="dom-context-2d-measureText"><a href="#measuretext">measureText()</a></code> method.

  </p><p class="note">Glyphs rendered using <code title="dom-context-2d-fillText"><a href="#filltext">fillText()</a></code> and <code title="dom-context-2d-strokeText"><a href="#stroketext">strokeText()</a></code> can spill out of the box given
   by the font size (the em square size) and the width returned by <code title="dom-context-2d-measureText"><a href="#measuretext">measureText()</a></code> (the text width). This
   version of the specification does not provide a way to obtain the bounding
   box dimensions of the text. If the text is to be rendered and removed,
   care needs to be taken to replace the entire area of the canvas that the
   clipping region covers, not just the box given by the em square height and
   measured text width.</p>
  <!-- XXXv4 Drawing text along a given path -->
  <!-- XXXv4 Adding text to a path -->
  <!-- see also: http://www.w3.org/TR/SVG11/text.html#TextpathLayoutRules -->
  <!-- see also: http://developer.mozilla.org/en/docs/Drawing_text_using_a_canvas -->

  <p class="note">A future version of the 2D context API may provide a way to
   render fragments of documents, rendered using CSS, straight to the canvas.
   This would be provided in preference to a dedicated way of doing multiline
   layout.

  </p><h6 id="images"><span class="secno">4.7.11.1.10. </span>Images</h6>

  <p>To draw images onto the canvas, the <dfn id="drawimage" title="dom-context-2d-drawImage"><code>drawImage</code></dfn> method can be
   used.

  </p><p>This method is overloaded with three variants: <code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</code>, <code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>, and <code title="">drawImage(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>. (Actually it is overloaded with six; each of
   those three can take either an <code><a href="#htmlimageelement">HTMLImageElement</a></code> or an <code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code> for the <var title="">image</var> argument.) If not specified, the <var title="">dw</var> and <var title="">dh</var> arguments must default to the
   values of <var title="">sw</var> and <var title="">sh</var>, interpreted
   such that one CSS pixel in the image is treated as one unit in the canvas
   coordinate space<span class="testrefs kw-must" id="testrefs.2d.drawImage.defaultdest"> <a href="#testrefs.2d.drawImage.defaultdest" title="2d.drawImage.defaultdest">#</a> <a href="2d.drawImage.3arg.html">2d.drawImage.3arg</a> </span>. If the <var title="">sx</var>, <var title="">sy</var>,
   <var title="">sw</var>, and <var title="">sh</var> arguments are omitted,
   they must default to 0, 0, the image's intrinsic width in image pixels,
   and the image's intrinsic height in image pixels, respectively<span class="testrefs kw-must" id="testrefs.2d.drawImage.defaultsource"> <a href="#testrefs.2d.drawImage.defaultsource" title="2d.drawImage.defaultsource">#</a> <a href="2d.drawImage.3arg.html">2d.drawImage.3arg</a> <a href="2d.drawImage.5arg.html">2d.drawImage.5arg</a> </span>.

  </p><p>The <var title="">image</var> argument must be an instance of an
   <code><a href="#htmlimageelement">HTMLImageElement</a></code> or <code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code>. If the <var title="">image</var> is of the wrong type or null, the implementation must
   raise a <code>TYPE_MISMATCH_ERR</code> exception<span class="testrefs kw-must" id="testrefs.2d.drawImage.type"> <a href="#testrefs.2d.drawImage.type" title="2d.drawImage.type">#</a> <a href="2d.drawImage.null.html">2d.drawImage.null</a> <a href="2d.drawImage.wrongtype.html">2d.drawImage.wrongtype</a> </span>.</p>
  <!-- createPattern() has an equivalent paragraph -->

  <p>If the <var title="">image</var> argument is an <code><a href="#htmlimageelement">HTMLImageElement</a></code> object whose <code title="dom-img-complete"><a href="#complete">complete</a></code> attribute
   is false, then the implementation must raise an
   <code>INVALID_STATE_ERR</code> exception<span class="testrefs kw-must" id="testrefs.2d.drawImage.incomplete"> <a href="#testrefs.2d.drawImage.incomplete" title="2d.drawImage.incomplete">#</a> <a href="2d.drawImage.incomplete.html">2d.drawImage.incomplete</a> <a href="2d.drawImage.broken.html">2d.drawImage.broken</a> </span>.</p>
  <!-- createPattern() has an equivalent paragraph -->
  <!-- handled by the next paragraph
  <p>If the <var title="">image</var> argument is an
  <code>HTMLCanvasElement</code> object with either a horizontal
  dimension or a vertical dimension equal to zero, then the
  implementation must raise an <code>INVALID_STATE_ERR</code>
  exception.</p>
  -->
  <!-- createPattern() has an equivalent paragraph -->

  <p>The source rectangle is the rectangle whose corners are the four points
   (<var title="">sx</var>, <var title="">sy</var>), (<span><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>),
   (<span><var title="">sx</var>+<var title="">sw</var></span>, <span><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>,
   <span><var title="">sy</var>+<var title="">sh</var></span>).

  </p><p>If the source rectangle is not entirely within the source image<span class="testrefs kw-must" id="testrefs.2d.drawImage.outsidesource"> <a href="#testrefs.2d.drawImage.outsidesource" title="2d.drawImage.outsidesource">#</a> <a href="2d.drawImage.outsidesource.html">2d.drawImage.outsidesource</a> </span>, or if
   one of the <var title="">sw</var> or <var title="">sh</var> arguments is
   zero<span class="testrefs kw-must" id="testrefs.2d.drawImage.zerosource"> <a href="#testrefs.2d.drawImage.zerosource" title="2d.drawImage.zerosource">#</a> <a href="2d.drawImage.zerosource.html">2d.drawImage.zerosource</a> </span>, the implementation must raise an <code>INDEX_SIZE_ERR</code>
   exception.

  </p><p>The destination rectangle is the rectangle whose corners are the four
   points (<var title="">dx</var>, <var title="">dy</var>), (<span><var title="">dx</var>+<var title="">dw</var></span>, <var title="">dy</var>),
   (<span><var title="">dx</var>+<var title="">dw</var></span>, <span><var title="">dy</var>+<var title="">dh</var></span>), (<var title="">dx</var>,
   <span><var title="">dy</var>+<var title="">dh</var></span>).

  </p><p>When <code title="dom-context-2d-drawImage"><a href="#drawimage">drawImage()</a></code> is invoked, the region of the
   image specified by the source rectangle must be painted on the region of
   the canvas specified by the destination rectangle<span class="testrefs kw-must" id="testrefs.2d.drawImage.paint"> <a href="#testrefs.2d.drawImage.paint" title="2d.drawImage.paint">#</a> <a href="2d.drawImage.9arg.basic.html">2d.drawImage.9arg.basic</a> <a href="2d.drawImage.9arg.sourcepos.html">2d.drawImage.9arg.sourcepos</a> <a href="2d.drawImage.9arg.sourcesize.html">2d.drawImage.9arg.sourcesize</a> <a href="2d.drawImage.9arg.destpos.html">2d.drawImage.9arg.destpos</a> <a href="2d.drawImage.9arg.destsize.html">2d.drawImage.9arg.destsize</a> <a href="2d.drawImage.canvas.html">2d.drawImage.canvas</a> <a href="2d.drawImage.floatsource.html">2d.drawImage.floatsource</a> </span>, after applying the <a href="#transformations0" title="dom-context-2d-transformation">current
   transformation matrix</a> to the points of the destination rectangle.

  </p><p><img src="http://www.whatwg.org/specs/web-apps/current-work/images/drawImage.png" alt=""></p>
  <!-- no alt="" text
  since the image is just repeating what was stated in the previous
  paragraph. -->

  <p class="note">When a canvas is drawn onto itself, the drawing model
   requires the source to be copied before the image is drawn back onto the
   canvas, so it is possible to copy parts of a canvas onto overlapping parts
   of itself.

  </p><p>When the <code title="dom-context-2d-drawImage"><a href="#drawimage">drawImage()</a></code> method is passed, as its <var title="">image</var> argument, an animated image, the poster frame of the
   animation, or the first frame of the animation if there is no poster
   frame, must be used<span class="testrefs kw-must" id="testrefs.2d.drawImage.animated"> <a href="#testrefs.2d.drawImage.animated" title="2d.drawImage.animated">#</a> <a href="2d.drawImage.animated.gif.html">2d.drawImage.animated.gif</a> <a href="2d.drawImage.animated.apng.html">2d.drawImage.animated.apng</a> <a href="2d.drawImage.animated.poster.html">2d.drawImage.animated.poster</a> </span>.</p>
  <!-- createPattern() has an equivalent paragraph -->

  <p>Images are painted without affecting the current path<span class="testrefs kw-none" id="testrefs.2d.drawImage.unaffect"> <a href="#testrefs.2d.drawImage.unaffect" title="2d.drawImage.unaffect">#</a> <a href="2d.drawImage.path.html">2d.drawImage.path</a> </span>, and are subject
   to <a href="#shadows0" title="shadows">shadow effects</a>, <a href="#globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, the
   <a href="#clipping" title="clipping region">clipping region</a>, and <a href="#globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
   operators</a><span class="testrefs kw-none" id="testrefs.2d.drawImage.subject"> <a href="#testrefs.2d.drawImage.subject" title="2d.drawImage.subject">#</a> <a href="2d.drawImage.transform.html">2d.drawImage.transform</a> <a href="2d.drawImage.alpha.html">2d.drawImage.alpha</a> <a href="2d.drawImage.clip.html">2d.drawImage.clip</a> <a href="2d.drawImage.composite.html">2d.drawImage.composite</a> </span>.</p>
  <!-- XXX should somehow say that the image used is the actual image
  of the target element, not the rendered image (e.g. height/width
  attributes don't affect it -->

  <h6 id="pixel"><span class="secno">4.7.11.1.11. </span><dfn id="pixel1">Pixel
   manipulation</dfn></h6>

  <p>The <dfn id="createimagedata" title="dom-context-2d-createImageData"><code>createImageData(<var title="">sw</var>, <var title="">sh</var>)</code></dfn> method must return
   an <code><a href="#imagedata">ImageData</a></code> object<span class="testrefs kw-must" id="testrefs.2d.imageData.create.object"> <a href="#testrefs.2d.imageData.create.object" title="2d.imageData.create.object">#</a> <a href="2d.imageData.create.basic.html">2d.imageData.create.basic</a> <a href="2d.imageData.create.type.html">2d.imageData.create.type</a> </span> representing a
   rectangle with a width in CSS pixels equal to the absolute magnitude of
   <var title="">sw</var> and a height in CSS pixels equal to the absolute
   magnitude of <var title="">sh</var><span class="testrefs kw-must" id="testrefs.2d.imageData.create.size"> <a href="#testrefs.2d.imageData.create.size" title="2d.imageData.create.size">#</a> <a href="2d.imageData.create.initial.html">2d.imageData.create.initial</a> <a href="2d.imageData.create.large.html">2d.imageData.create.large</a> <a href="2d.imageData.create.tiny.html">2d.imageData.create.tiny</a> <a href="2d.imageData.create.negative.html">2d.imageData.create.negative</a> </span>, filled with transparent black<span class="testrefs kw-must" id="testrefs.2d.imageData.create.initial"> <a href="#testrefs.2d.imageData.create.initial" title="2d.imageData.create.initial">#</a> <a href="2d.imageData.create.initial.html">2d.imageData.create.initial</a> </span>.

  </p><p>The <dfn id="getimagedata" title="dom-context-2d-getImageData"><code>getImageData(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</code></dfn> method must return an <code><a href="#imagedata">ImageData</a></code> object<span class="testrefs kw-must" id="testrefs.2d.imageData.get.object"> <a href="#testrefs.2d.imageData.get.object" title="2d.imageData.get.object">#</a> <a href="2d.imageData.get.type.html">2d.imageData.get.type</a> </span> representing the underlying
   pixel data for the area of the canvas denoted by the rectangle whose
   corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span><var title="">sx</var>+<var title="">sw</var></span>, <span><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>,
   <span><var title="">sy</var>+<var title="">sh</var></span>), in canvas
   coordinate space units<span class="testrefs kw-must" id="testrefs.2d.imageData.get.basic"> <a href="#testrefs.2d.imageData.get.basic" title="2d.imageData.get.basic">#</a> <a href="2d.imageData.get.basic.html">2d.imageData.get.basic</a> <a href="2d.imageData.get.source.outside.html">2d.imageData.get.source.outside</a> <a href="2d.imageData.get.source.negative.html">2d.imageData.get.source.negative</a> <a href="2d.imageData.get.source.size.html">2d.imageData.get.source.size</a> </span>. Pixels outside the canvas must be returned as
   transparent black<span class="testrefs kw-must" id="testrefs.2d.imageData.get.outside"> <a href="#testrefs.2d.imageData.get.outside" title="2d.imageData.get.outside">#</a> <a href="2d.imageData.get.source.outside.html">2d.imageData.get.source.outside</a> </span>. Pixels must be returned as non-premultiplied alpha
   values<span class="testrefs kw-must" id="testrefs.2d.imageData.get.premul"> <a href="#testrefs.2d.imageData.get.premul" title="2d.imageData.get.premul">#</a> <a href="2d.imageData.get.nonpremul.html">2d.imageData.get.nonpremul</a> </span>.

  </p><p>If any of the arguments to <code title="dom-context-2d-createImageData"><a href="#createimagedata">createImageData()</a></code> or <code title="dom-context-2d-getImageData"><a href="#getimagedata">getImageData()</a></code> are infinite or NaN, the
   method must instead raise a <code>NOT_SUPPORTED_ERR</code> exception<span class="testrefs kw-must" id="testrefs.2d.imageData.getcreate.nonfinite"> <a href="#testrefs.2d.imageData.getcreate.nonfinite" title="2d.imageData.getcreate.nonfinite">#</a> <a href="2d.imageData.create.nonfinite.html">2d.imageData.create.nonfinite</a> <a href="2d.imageData.get.nonfinite.html">2d.imageData.get.nonfinite</a> </span>. If
   either the <var title="">sw</var> or <var title="">sh</var> arguments are
   zero, the method must instead raise an <code>INDEX_SIZE_ERR</code>
   exception<span class="testrefs kw-must" id="testrefs.2d.imageData.getcreate.zero"> <a href="#testrefs.2d.imageData.getcreate.zero" title="2d.imageData.getcreate.zero">#</a> <a href="2d.imageData.create.zero.html">2d.imageData.create.zero</a> <a href="2d.imageData.get.zero.html">2d.imageData.get.zero</a> </span>.

  </p><p><code><a href="#imagedata">ImageData</a></code> objects must be
   initialized so that their <dfn id="width3" title="dom-imagedata-width"><code>width</code></dfn> attribute is set to
   <var title="">w</var>, the number of physical device pixels per row in the
   image data, their <dfn id="height2" title="dom-imagedata-height"><code>height</code></dfn> attribute is set to
   <var title="">h</var>, the number of rows in the image data, and their
   <dfn id="data1" title="dom-imagedata-data"><code>data</code></dfn> attribute
   is initialized to a <code><a href="#canvaspixelarray">CanvasPixelArray</a></code> object holding the
   image data<span class="testrefs kw-must" id="testrefs.2d.imageData.initial"> <a href="#testrefs.2d.imageData.initial" title="2d.imageData.initial">#</a> <a href="2d.imageData.create.initial.html">2d.imageData.create.initial</a> </span>. At least one pixel's worth of image data must be returned<span class="testrefs kw-must" id="testrefs.2d.imageData.one"> <a href="#testrefs.2d.imageData.one" title="2d.imageData.one">#</a> <a href="2d.imageData.create.tiny.html">2d.imageData.create.tiny</a> <a href="2d.imageData.get.tiny.html">2d.imageData.get.tiny</a> </span>.

  </p><p>The <code><a href="#canvaspixelarray">CanvasPixelArray</a></code> object
   provides ordered, indexed access to the color components of each pixel of
   the image data. The data must be represented in left-to-right order, row
   by row top to bottom, starting with the top left, with each pixel's red,
   green, blue, and alpha components being given in that order for each
   pixel<span class="testrefs kw-must" id="testrefs.2d.imageData.order"> <a href="#testrefs.2d.imageData.order" title="2d.imageData.order">#</a> <a href="2d.imageData.get.order.cols.html">2d.imageData.get.order.cols</a> <a href="2d.imageData.get.order.rows.html">2d.imageData.get.order.rows</a> <a href="2d.imageData.get.order.rgb.html">2d.imageData.get.order.rgb</a> <a href="2d.imageData.get.order.alpha.html">2d.imageData.get.order.alpha</a> </span>. Each component of each device pixel represented in this array must
   be in the range 0..255, representing the 8 bit value for that component<span class="testrefs kw-must" id="testrefs.2d.imageData.range"> <a href="#testrefs.2d.imageData.range" title="2d.imageData.range">#</a> <a href="2d.imageData.get.range.html">2d.imageData.get.range</a> <a href="2d.imageData.get.clamp.html">2d.imageData.get.clamp</a> </span>.
   The components must be assigned consecutive indices starting with 0 for
   the top left pixel's red component.

  </p><p>The <code><a href="#canvaspixelarray">CanvasPixelArray</a></code> object
   thus represents <var title="">h</var>×<var title="">w</var>×4
   integers. The <dfn id="length5" title="dom-canvaspixelarray-length"><code>length</code></dfn> attribute of a
   <code><a href="#canvaspixelarray">CanvasPixelArray</a></code> object must
   return this number.

  </p><p>The <dfn id="xxx5index" title="dom-canvaspixelarray-XXX5"><code>XXX5(<var title="">index</var>)</code></dfn> method must return the value of the
   <var title="">index</var>th component in the array.

  </p><p>The <dfn id="xxx6index" title="dom-canvaspixelarray-XXX6"><code>XXX6(<var title="">index</var>, <var title="">value</var>)</code></dfn> method must
   set the value of the <var title="">index</var>th component in the array to
   <var title="">value</var><span class="testrefs kw-must" id="testrefs.2d.imageData.set.basic"> <a href="#testrefs.2d.imageData.set.basic" title="2d.imageData.set.basic">#</a> <a href="2d.imageData.object.set.html">2d.imageData.object.set</a> </span>. JS <code>undefined</code> values must be
   converted to zero<span class="testrefs kw-must" id="testrefs.2d.imageData.set.undefined"> <a href="#testrefs.2d.imageData.set.undefined" title="2d.imageData.set.undefined">#</a> <a href="2d.imageData.object.undefined.html">2d.imageData.object.undefined</a> </span>. Other values must first be converted to numbers using
   JavaScript's ToNumber algorithm<span class="testrefs kw-must" id="testrefs.2d.imageData.set.tonumber"> <a href="#testrefs.2d.imageData.set.tonumber" title="2d.imageData.set.tonumber">#</a> <a href="2d.imageData.object.string.html">2d.imageData.object.string</a> </span>, and if the result is a NaN value, then
   the value be must converted to zero<span class="testrefs kw-must" id="testrefs.2d.imageData.set.nan"> <a href="#testrefs.2d.imageData.set.nan" title="2d.imageData.set.nan">#</a> <a href="2d.imageData.object.nan.html">2d.imageData.object.nan</a> </span>. If the result is less than 0, it must
   be clamped to zero<span class="testrefs kw-must" id="testrefs.2d.imageData.set.clamp0"> <a href="#testrefs.2d.imageData.set.clamp0" title="2d.imageData.set.clamp0">#</a> <a href="2d.imageData.object.clamp.html">2d.imageData.object.clamp</a> </span>. If the result is more than 255, it must be clamped to
   255<span class="testrefs kw-must" id="testrefs.2d.imageData.set.clamp255"> <a href="#testrefs.2d.imageData.set.clamp255" title="2d.imageData.set.clamp255">#</a> <a href="2d.imageData.object.clamp.html">2d.imageData.object.clamp</a> </span>. If the number is not an integer, it must be rounded to the nearest
   integer using the IEEE 754r <i>convertToIntegerTiesToEven</i> rounding
   mode<span class="testrefs kw-must" id="testrefs.2d.imageData.set.round"> <a href="#testrefs.2d.imageData.set.round" title="2d.imageData.set.round">#</a> <a href="2d.imageData.object.round.html">2d.imageData.object.round</a> </span>. <a href="#refsECMA262">[ECMA262]</a> <a href="#refsIEEE754r">[IEEE754R]</a>

  </p><p class="note">The width and height (<var title="">w</var> and <var title="">h</var>) might be different from the <var title="">sw</var> and
   <var title="">sh</var> arguments to the above methods, e.g. if the canvas
   is backed by a high-resolution bitmap, or if the <var title="">sw</var>
   and <var title="">sh</var> arguments are negative.

  </p><p>The <dfn id="putimagedata" title="dom-context-2d-putImageData"><code>putImageData(<var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>)</code></dfn> and <dfn id="putimagedata0" title="dom-context-2d-putImageData-dirty"><code>putImageData(<var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>,
   <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, <var title="">dirtyHeight</var>)</code></dfn>
   methods write data from <code><a href="#imagedata">ImageData</a></code>
   structures back to the canvas.

  </p><p>If any of the arguments to the method are infinite or NaN, the method
   must raise an <code>NOT_SUPPORTED_ERR</code> exception<span class="testrefs kw-must" id="testrefs.2d.imageData.put.nonfinite"> <a href="#testrefs.2d.imageData.put.nonfinite" title="2d.imageData.put.nonfinite">#</a> <a href="2d.imageData.put.nonfinite.html">2d.imageData.put.nonfinite</a> </span>.

  </p><p>If the first argument to the method is null<span class="testrefs kw-must" id="testrefs.2d.imageData.put.null"> <a href="#testrefs.2d.imageData.put.null" title="2d.imageData.put.null">#</a> <a href="2d.imageData.put.null.html">2d.imageData.put.null</a> </span> or not an <code><a href="#imagedata">ImageData</a></code> object<span class="testrefs kw-must" id="testrefs.2d.imageData.put.wrongtype"> <a href="#testrefs.2d.imageData.put.wrongtype" title="2d.imageData.put.wrongtype">#</a> <a href="2d.imageData.put.wrongtype.html">2d.imageData.put.wrongtype</a> </span> then the <code title="dom-context-2d-putImageData"><a href="#putimagedata">putImageData()</a></code> method must raise a
   <code>TYPE_MISMATCH_ERR</code> exception.

  </p><p>When the last four arguments are omitted, they must be assumed to have
   the values 0, 0, the <code title="dom-imagedata-width"><a href="#width3">width</a></code> member of the <var title="">imagedata</var> structure, and the <code title="dom-imagedata-height"><a href="#height2">height</a></code> member of
   the <var title="">imagedata</var> structure, respectively<span class="testrefs kw-must" id="testrefs.2d.imageData.put.3arg"> <a href="#testrefs.2d.imageData.put.3arg" title="2d.imageData.put.3arg">#</a> <a href="2d.imageData.put.basic.html">2d.imageData.put.basic</a> </span>.

  </p><p>When invoked with arguments that do not, per the last few paragraphs,
   cause an exception to be raised, the <code title="dom-context-2d-putImageData"><a href="#putimagedata">putImageData()</a></code> method must act as follows<span class="testrefs kw-must" id="testrefs.2d.imageData.put.normal"> <a href="#testrefs.2d.imageData.put.normal" title="2d.imageData.put.normal">#</a> <a href="2d.imageData.put.basic.html">2d.imageData.put.basic</a> <a href="2d.imageData.put.created.html">2d.imageData.put.created</a> <a href="2d.imageData.put.cross.html">2d.imageData.put.cross</a> <a href="2d.imageData.put.alpha.html">2d.imageData.put.alpha</a> <a href="2d.imageData.put.modified.html">2d.imageData.put.modified</a> <a href="2d.imageData.put.dirty.zero.html">2d.imageData.put.dirty.zero</a> <a href="2d.imageData.put.dirty.rect1.html">2d.imageData.put.dirty.rect1</a> <a href="2d.imageData.put.dirty.rect2.html">2d.imageData.put.dirty.rect2</a> <a href="2d.imageData.put.dirty.negative.html">2d.imageData.put.dirty.negative</a> <a href="2d.imageData.put.dirty.outside.html">2d.imageData.put.dirty.outside</a> </span>:

  </p><ol>
   <li>
    <p>Let <var title="">dx<sub>device</sub></var> be the x-coordinate of the
     device pixel in the underlying pixel data of the canvas corresponding to
     the <var title="">dx</var> coordinate in the canvas coordinate space.</p>

    <p>Let <var title="">dy<sub>device</sub></var> be the y-coordinate of the
     device pixel in the underlying pixel data of the canvas corresponding to
     the <var title="">dy</var> coordinate in the canvas coordinate space.</p>

   </li><li>
    <p>If <var title="">dirtyWidth</var> is negative, let <var title="">dirtyX</var> be <span><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span>, and let <var title="">dirtyWidth</var>
     be equal to the absolute magnitude of <var title="">dirtyWidth</var>.</p>

    <p>If <var title="">dirtyHeight</var> is negative, let <var title="">dirtyY</var> be <span><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span>, and let <var title="">dirtyHeight</var> be equal to the absolute magnitude of <var title="">dirtyHeight</var>.</p>

   </li><li>
    <p>If <var title="">dirtyX</var> is negative, let <var title="">dirtyWidth</var> be <span><var title="">dirtyWidth</var>+<var title="">dirtyX</var></span>, and let <var title="">dirtyX</var> be
     zero.</p>

    <p>If <var title="">dirtyY</var> is negative, let <var title="">dirtyHeight</var> be <span><var title="">dirtyHeight</var>+<var title="">dirtyY</var></span>, and let <var title="">dirtyY</var> be
     zero.</p>

   </li><li>
    <p>If <span><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span> is greater than the <code title="dom-imagedata-width"><a href="#width3">width</a></code> attribute
     of the <var title="">imagedata</var> argument, let <var title="">dirtyWidth</var> be the value of that <code title="dom-imagedata-width"><a href="#width3">width</a></code> attribute,
     minus the value of <var title="">dirtyX</var>.</p>

    <p>If <span><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span> is greater than the <code title="dom-imagedata-height"><a href="#height2">height</a></code>
     attribute of the <var title="">imagedata</var> argument, let <var title="">dirtyHeight</var> be the value of that <code title="dom-imagedata-height"><a href="#height2">height</a></code>
     attribute, minus the value of <var title="">dirtyY</var>.</p>

   </li><li>
    <p>If, after those changes, either <var title="">dirtyWidth</var> or <var title="">dirtyHeight</var> is negative or zero, stop these steps without
     affecting the canvas.</p>

   </li><li>
    <p>Otherwise, for all integer values of <var title="">x</var> and <var title="">y</var> where <span><var title="">dirtyX</var> ≤ <var title="">x</var> &lt; <span><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span> and <span><var title="">dirtyY</var> ≤ <var title="">y</var> &lt; <span><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the four channels of the
     pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in
     the <var title="">imagedata</var> data structure to the pixel with
     coordinate (<span><var title="">dx<sub>device</sub></var>+<var title="">x</var></span>, <span><var title="">dy<sub>device</sub></var>+<var title="">y</var></span>) in the
     underlying pixel data of the canvas.
  </p></li></ol>

  <p>The handling of pixel rounding when the specified coordinates do not
   exactly map to the device coordinate space is not defined by this
   specification, except that the following must result in no visible changes
   to the rendering<span class="testrefs kw-must" id="testrefs.2d.imageData.unchanged"> <a href="#testrefs.2d.imageData.unchanged" title="2d.imageData.unchanged">#</a> <a href="2d.imageData.put.unchanged.html">2d.imageData.put.unchanged</a> </span>:

  </p><pre>context.putImageData(context.getImageData(x, y, w, h), x, y);</pre>

  <p>...for any value of <var title="">x</var>, <var title="">y</var>, <var title="">w</var>, and <var title="">h</var>, and the following two calls:

  </p><pre>context.createImageData(w, h);
context.getImageData(0, 0, w, h);</pre>

  <p>...must return <code><a href="#imagedata">ImageData</a></code> objects
   with the same dimensions, for any value of <var title="">w</var> and <var title="">h</var><span class="testrefs kw-must" id="testrefs.2d.imageData.createround"> <a href="#testrefs.2d.imageData.createround" title="2d.imageData.createround">#</a> <a href="2d.imageData.create.round.html">2d.imageData.create.round</a> </span>. In other words, while user agents may round the
   arguments of these methods so that they map to device pixel boundaries,
   any rounding performed must be performed consistently for all of the <code title="dom-context-2d-getImageData"><a href="#getimagedata">createImageData()</a></code>, <code title="dom-context-2d-getImageData"><a href="#getimagedata">getImageData()</a></code> and <code title="dom-context-2d-putImageData"><a href="#putimagedata">putImageData()</a></code> operations.

  </p><p>The current path, <a href="#transformations0" title="dom-context-2d-transformation">transformation matrix</a>, <a href="#shadows0" title="shadows">shadow attributes</a>, <a href="#globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, the
   <a href="#clipping" title="clipping region">clipping region</a>, and <a href="#globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
   operator</a> must not affect the <code title="dom-context-2d-getImageData"><a href="#getimagedata">getImageData()</a></code> and <code title="dom-context-2d-putImageData"><a href="#putimagedata">putImageData()</a></code> methods<span class="testrefs kw-must" id="testrefs.2d.imageData.unaffected"> <a href="#testrefs.2d.imageData.unaffected" title="2d.imageData.unaffected">#</a> <a href="2d.imageData.get.unaffected.html">2d.imageData.get.unaffected</a> <a href="2d.imageData.put.unaffected.html">2d.imageData.put.unaffected</a> <a href="2d.imageData.put.clip.html">2d.imageData.put.clip</a> </span>.

  </p><div class="example">
   <p>The data returned by <code title="dom-context-2d-getImageData"><a href="#getimagedata">getImageData()</a></code> is at the resolution of
    the canvas backing store, which is likely to not be one device pixel to
    each CSS pixel if the display used is a high resolution display.</p>

   <p>In the following example, the script generates an <code><a href="#imagedata">ImageData</a></code> object so that it can draw onto
    it.</p>

   <pre>// canvas is a reference to a &lt;canvas&gt; element
var context = canvas.getContext('2d');

// create a blank slate
var data = context.createImageData(canvas.width, canvas.height);

// create some plasma
FillPlasma(data, 'green'); // green plasma

// add a cloud to the plasma
AddCloud(data, data.width/2, data.height/2); // put a cloud in the middle

// paint the plasma+cloud on the canvas
context.putImageData(data, 0, 0);

// support methods
function FillPlasma(data, color) { ... }
function AddCloud(data, x, y) { ... }</pre>
  </div>

  <div class="example">
   <p>Here is an example of using <code title="dom-context-2d-getImageData"><a href="#getimagedata">getImageData()</a></code> and <code title="dom-context-2d-putImageData"><a href="#putimagedata">putImageData()</a></code> to implement an edge
    detection filter.</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Edge detection demo&lt;/title&gt;
  &lt;script&gt;
   var image = new Image();
   function init() {
     image.onload = demo;
     image.src = &quot;image.jpeg&quot;;
   }
   function demo() {
     var canvas = document.getElementsByTagName('canvas')[0];
     var context = canvas.getContext('2d');

     // draw the image onto the canvas
     context.drawImage(image, 0, 0);

     // get the image data to manipulate
     var input = context.getImageData(0, 0, canvas.width, canvas.height);

     // get an empty slate to put the data into
     var output = context.crateImageData(canvas.width, canvas.height);

     // alias some variables for convenience
     // notice that we are using input.width and input.height here
     // as they might not be the same as canvas.width and canvas.height
     // (in particular, they might be different on high-res displays)
     var w = input.width, h = input.height;
     var inputData = input.data;
     var outputData = output.data;

     // edge detection
     for (var y = 1; y &lt; h-1; y += 1) {
       for (var x = 1; x &lt; w-1; x += 1) {
         for (var c = 0; c &lt; 3; c += 1) {
           var i = (y*w + x)*4 + c;
           outputData[i] = 127 + -inputData[i - w*4 - 4] -   inputData[i - w*4] - inputData[i - w*4 + 4] +
                                 -inputData[i - 4]       + 8*inputData[i]       - inputData[i + 4] +
                                 -inputData[i + w*4 - 4] -   inputData[i + w*4] - inputData[i + w*4 + 4];
         }
         outputData[(y*w + x)*4 + 3] = 255; // alpha
       }
     }

     // put the image data back after manipulation
     context.putImageData(output, 0, 0);
   }
  &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload=&quot;init()&quot;&gt;
  &lt;canvas&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>
  </div>

  <h6 id="drawing"><span class="secno">4.7.11.1.12. </span>Drawing model</h6>

  <p>When a shape or image is painted, user agents must follow these steps,
   in the order given (or act as if they do):

  </p><ol>
   <li>
    <p>Render the shape or image, creating image <var title="">A</var>, as
     described in the previous sections. For shapes, the current fill,
     stroke, and line styles must be honored, and the stroke must itself also
     be subjected to the current transformation matrix.

   </p></li><li>
    <p>Render the shadow from image <var title="">A</var>, using the current
     shadow styles, creating image <var title="">B</var>.

   </p></li><li>
    <p>Multiply the alpha component of every pixel in <var title="">B</var>
     by <code title="dom-context-2d-globalAlpha"><a href="#globalalpha">globalAlpha</a></code>.

   </p></li><li>
    <p>Within the clipping region, composite <var title="">B</var> over the
     current canvas bitmap using the current composition operator.

   </p></li><li>
    <p>Multiply the alpha component of every pixel in <var title="">A</var>
     by <code title="dom-context-2d-globalAlpha"><a href="#globalalpha">globalAlpha</a></code>.

   </p></li><li>
    <p>Within the clipping region, composite <var title="">A</var> over the
     current canvas bitmap using the current composition operator.
  </p></li></ol>
  <!-- XXX add xrefs in the list above -->
  <!--
  <h5 id="3d">The 3D context</h5>

  <p class="big-issue">Well, one day.</p>
-->

  <h5 id="color"><span class="secno">4.7.11.2. </span>Color spaces and color
   correction</h5>

  <p>The <code><a href="#canvas">canvas</a></code> APIs must perform color
   correction at only two points: when rendering images with their own gamma
   correction and color space information onto the canvas, to convert the
   image to the color space used by the canvas (e.g. using the <code title="dom-context-2d-drawImage"><a href="#drawimage">drawImage()</a></code>
   method with an <code><a href="#htmlimageelement">HTMLImageElement</a></code> object), and when
   rendering the actual canvas bitmap to the output device.

  </p><p class="note">Thus, in the 2D context, colors used to draw shapes onto the
   canvas will exactly match colors obtained through the <code title="dom-context-2d-getImageData"><a href="#getimagedata">getImageData()</a></code> method.

  </p><p>The <code title="dom-canvas-toDataURL"><a href="#todataurl">toDataURL()</a></code> method must not include color
   space information in the resource returned. Where the output format allows
   it, the color of pixels in resources created by <code title="dom-canvas-toDataURL"><a href="#todataurl">toDataURL()</a></code>
   must match those returned by the <code title="dom-context-2d-getImageData"><a href="#getimagedata">getImageData()</a></code> method.

  </p><p>In user agents that support CSS, the color space used by a <code><a href="#canvas">canvas</a></code> element must match the color space used
   for processing any colors for that element in CSS.

  </p><p>The gamma correction and color space information of images must be
   handled in such a way that an image rendered directly using an <code><a href="#img">img</a></code> element would use the same colors as one
   painted on a <code><a href="#canvas">canvas</a></code> element that is
   then itself rendered. Furthermore, the rendering of images that have no
   color correction information (such as those returned by the <code title="dom-canvas-toDataURL"><a href="#todataurl">toDataURL()</a></code>
   method) must be rendered with no color correction.

  </p><p class="note">Thus, in the 2D context, calling the <code title="dom-context-2d-drawImage"><a href="#drawimage">drawImage()</a></code>
   method to render the output of the <code title="dom-canvas-toDataURL"><a href="#todataurl">toDataURL()</a></code> method to the canvas, given the
   appropriate dimensions, has no visible effect.

  </p><h5 id="security1"><span class="secno">4.7.11.3. </span>Security with <code><a href="#canvas">canvas</a></code> elements</h5>

  <p><strong>Information leakage</strong> can occur if scripts from one <a href="#origin0">origin</a> can access information (e.g. read pixels) from
   images from another origin (one that isn't the <a href="#same-origin" title="same origin">same</a>).

  </p><p>To mitigate this, <code><a href="#canvas">canvas</a></code> elements are
   defined to have a flag indicating whether they are <i>origin-clean</i>.
   All <code><a href="#canvas">canvas</a></code> elements must start with
   their <i>origin-clean</i> set to true<span class="testrefs kw-must" id="testrefs.security.start"> <a href="#testrefs.security.start" title="security.start">#</a> <a href="security.pattern.create.html">security.pattern.create</a> <a href="security.pattern.cross.html">security.pattern.cross</a> <a href="security.pattern.canvas.timing.html">security.pattern.canvas.timing</a> </span>. The flag must be set to false if
   any of the following actions occur:

  </p><ul>
   <li>
    <p>The element's 2D context's <code title="dom-context-2d-drawImage"><a href="#drawimage">drawImage()</a></code> method is called with an
     <code><a href="#htmlimageelement">HTMLImageElement</a></code> whose <a href="#origin0">origin</a> is not the <a href="#same-origin" title="same      origin">same</a> as that of the <code>Document</code> object that owns
     the <code><a href="#canvas">canvas</a></code> element<span class="testrefs kw-must" id="testrefs.security.drawImage.image"> <a href="#testrefs.security.drawImage.image" title="security.drawImage.image">#</a> <a href="security.drawImage.image.html">security.drawImage.image</a> </span>.

   </p></li><li>
    <p>The element's 2D context's <code title="dom-context-2d-drawImage"><a href="#drawimage">drawImage()</a></code> method is called with an
     <code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code> whose
     <i>origin-clean</i> flag is false<span class="testrefs kw-must" id="testrefs.security.drawImage.canvas"> <a href="#testrefs.security.drawImage.canvas" title="security.drawImage.canvas">#</a> <a href="security.drawImage.canvas.html">security.drawImage.canvas</a> </span>.

   </p></li><li>
    <p>The element's 2D context's <code title="dom-context-2d-fillStyle"><a href="#fillstyle">fillStyle</a></code> attribute is set to a <code><a href="#canvaspattern0">CanvasPattern</a></code> object that was created
     from an <code><a href="#htmlimageelement">HTMLImageElement</a></code>
     whose <a href="#origin0">origin</a> was not the <a href="#same-origin" title="same origin">same</a> as that of the <code>Document</code> object
     that owns the <code><a href="#canvas">canvas</a></code> element when the
     pattern was created<span class="testrefs kw-must" id="testrefs.security.fillStyle.image"> <a href="#testrefs.security.fillStyle.image" title="security.fillStyle.image">#</a> <a href="security.pattern.image.fillStyle.html">security.pattern.image.fillStyle</a> </span>.

   </p></li><li>
    <p>The element's 2D context's <code title="dom-context-2d-fillStyle"><a href="#fillstyle">fillStyle</a></code> attribute is set to a <code><a href="#canvaspattern0">CanvasPattern</a></code> object that was created
     from an <code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code>
     whose <i>origin-clean</i> flag was false when the pattern was created<span class="testrefs kw-must" id="testrefs.security.fillStyle.canvas"> <a href="#testrefs.security.fillStyle.canvas" title="security.fillStyle.canvas">#</a> <a href="security.pattern.canvas.timing.html">security.pattern.canvas.timing</a> <a href="security.pattern.canvas.fillStyle.html">security.pattern.canvas.fillStyle</a> </span>.

   </p></li><li>
    <p>The element's 2D context's <code title="dom-context-2d-strokeStyle"><a href="#strokestyle">strokeStyle</a></code> attribute is set to a
     <code><a href="#canvaspattern0">CanvasPattern</a></code> object that was
     created from an <code><a href="#htmlimageelement">HTMLImageElement</a></code> whose <a href="#origin0">origin</a> was not the <a href="#same-origin" title="same origin">same</a> as that of the <code>Document</code> object
     that owns the <code><a href="#canvas">canvas</a></code> element when the
     pattern was created<span class="testrefs kw-must" id="testrefs.security.strokeStyle.image"> <a href="#testrefs.security.strokeStyle.image" title="security.strokeStyle.image">#</a> <a href="security.pattern.image.strokeStyle.html">security.pattern.image.strokeStyle</a> </span>.

   </p></li><li>
    <p>The element's 2D context's <code title="dom-context-2d-strokeStyle"><a href="#strokestyle">strokeStyle</a></code> attribute is set to a
     <code><a href="#canvaspattern0">CanvasPattern</a></code> object that was
     created from an <code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code> whose
     <i>origin-clean</i> flag was false when the pattern was created<span class="testrefs kw-must" id="testrefs.security.strokeStyle.canvas"> <a href="#testrefs.security.strokeStyle.canvas" title="security.strokeStyle.canvas">#</a> <a href="security.pattern.canvas.strokeStyle.html">security.pattern.canvas.strokeStyle</a> </span>.
  </p></li></ul>

  <p>Whenever the <code title="dom-canvas-toDataURL"><a href="#todataurl">toDataURL()</a></code> method of a <code><a href="#canvas">canvas</a></code> element whose <i>origin-clean</i> flag is
   set to false is called, the method must raise a <a href="#security9">security exception</a><span class="testrefs kw-must" id="testrefs.security.toDataURL"> <a href="#testrefs.security.toDataURL" title="security.toDataURL">#</a> <a href="security.drawImage.image.html">security.drawImage.image</a> </span>.

  </p><p>Whenever the <code title="dom-context-2d-getImageData"><a href="#getimagedata">getImageData()</a></code> method of the 2D context of
   a <code><a href="#canvas">canvas</a></code> element whose
   <i>origin-clean</i> flag is set to false is called with otherwise correct
   arguments, the method must raise a <a href="#security9">security
   exception</a><span class="testrefs kw-must" id="testrefs.security.getImageData"> <a href="#testrefs.security.getImageData" title="security.getImageData">#</a> <a href="security.drawImage.image.html">security.drawImage.image</a> </span>.

  </p><p class="note">Even resetting the canvas state by changing its <code title="attr-canvas-width"><a href="#width0">width</a></code> or <code title="attr-canvas-height"><a href="#height0">height</a></code> attributes
   doesn't reset the <i>origin-clean</i> flag.

  </p></body></html>